opacity

[apcmvw]

In mijn site heb ik een paar div's geplaatst die, zoals de bedoeling is, gedeeltelijk doorzichtig zijn. Nu wil ik in deze div's wat foto's plaatsen. Nu blijken deze ook onmiddellijk doorzichtig te worden en dat is niet de bedoeling. Hoe kan ik de doorzichtigheid van alleen de foto's in deze div's ongedaan maken?

 

[mastermindzh]

dat kan met RGBa

.div {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

 

[csshunter]

Hoi apcmvw,
Een testpagina: opacity-stapeling.htm

Hierin is de background van de body opgevuld met een img.
In de <div>'s in de middenkolom staan een aantal varianten.

Div 1: is bovenstaande code van mastermindzh.
Resultaat:

• Werkt in Firefox, Chrome, Opera en Safari; en volgens Netrenderer ook in IE9.
• Werkt niet in IE7, en volgens Netrenderer ook niet in IE8.

Div 2: is de "normale" opacity-eigenschap, dwz met aangepaste browserspecifieke voorschriften; de volgorde is belangrijk! (zie broncode).
Resultaat:

• De opacity werkt in alle browsers
• Maar het transparante erfenis-probleem van de startvraag is ook in alle browsers aanwezig!

Div 3 en div 4: is een combinatie van een div voor de opacity en overlappend daaroverheen (hier: omhooggetrokken) een aparte div met alle content.
Resultaat:

• De opacity werkt in alle browsers.
• Er kan niets geërfd worden: de content is niet transparant maar op volle sterkte.

=======

De foto's moeten dus niet binnen de <div> met de transparantie geplaatst worden, maar erbuiten (en dan teruggerangeerd worden naar de goede plaats).

• Het kan bv. ook met twee keer een {float:left;}, met de content in de tweede, die dan een negatieve {margin-left: -..px;} krijgt ter waarde van de breedte van de <div> met de opacity.
• En met enige voorzichtigheid kan het ook met een absolute positionering van de transparante <div> geregeld worden.

Met vriendelijke groet,
CSShunter