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
Ich bin ein H2 Titel
. . .
<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.
Ich bin ein H2 Titel
. . .
.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.