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.

Tranparez 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

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

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 Tranparenz verändern

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.

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

img.fade:hover {opacity: 1;}	

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.