Opacity - Transparenz für Bildern und Farben

Diese Definitionen sind Teil der W3C-CSS3 Recommendation (Empfehlung). Für ältere IE Versionen wird ein Filter benötigt.

Transparenz für Hintergrund- oder Schrift-Farbe

Transparenz - 20% Opacity

Transparenz - 40% Opacity

Transparenz - 60% Opacity

Transparenz - 80% Opacity

Keine Transparenz - 100%

Die CSS Angabe opacity: 0.2 setzt Schrift oder Bild auf 20% transparenz zur Hintergrundfarbe. 

Cross Browser opacity

CSS3 Standard opacity: 0.5;
IE 8 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"
IE 5-7 filter: alpha(opacity=50);


CSS Syntax Beispiel

.box{
background-color: #f60;
filter:alpha(opacity=40); /* IE 5-7 */
opacity: 0.4 /* CSS3 Standard */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"
 }

Wichtig: Transparenz wird vererbt

<div class="hintergrundbild">
<h2>Ich bin ein H2 Titel</h2>
<p><img src="nurse2.gif" alt="" /> . . . <img src="nurse1.gif" alt="" /></p>
</div> 

.hintergrundbild {
	background: url(blume-small.gif) no-repeat right center;
	border: 1px solid #3F3132;
	}

Das äussere Element bekommt das Hintergundbild über die class="hintergrundbild". Darin befinden sich ein h2 und ein p-Tag mit Bildern.

.fourty {opacity: 0.4 }

Das Element mit der class="hintergrundbild" bekommt eine Zusatzklasse für die Tranparenz class="hintergrundbild fourty". Alle Kinder (h2 und p) der class="hintergrundbild fourty" erben die Transpanez. Die Schrift und das Bild werden heller.

Mit dem CSS Pseudoelement :hover Transparenz verändern

img.fade {
border:1px solid #000;
opacity: 0.2;
}

img.fade:hover {opacity: 1;}	

Das Bild bekommt im HTML die class="fade" und wird dadurch nur mit 20% des Farbtons dargestellt. Mit dem Pseudoelement :hover wird das Bild onmouseover mit Vollton dargestellt.

Transparenz durch RGB-Angaben oder PNG's

TIP: RGBA Farbangaben oder transparente PNG's im Background  vererben die Transparenz nich an Schirft und Bilder. Siehe auch Intensivstation CSS3 - Farben

Brwoserabfragen können über Conditional Comments effizient gelöst werden.