KILL IE6

Opacity - Transparenz für Bildern und Farben

Diese Definitionen sind Teil der W3C-CSS3 Recommendation (Empfehlung). Die Beispiele werden ab IE6 von allen Browsern richtig interpretiert.

Tranparez für Hintergrund- oder Schrift Farbe

Transparenz - 20% Opacity

Transparenz - 40% Opacity

Transparenz - 60% Opacity

Transparenz - 80% Opacity

Keine Transparenz - 100%

Die Angabe opacity: 0.2 setzt Schrift oder Bild auf 20% transparenz zur Hintergrundfarbe. opacity: 0.2 wird von allen neuer Browsern umgesetzt. Für ältere IE Versionen wird filter:alpha(opacity=20); benötigt.

.twenty {
  filter:alpha(opacity=20); /* für IE6 + */
  opacity: 0.2 /* CSS3 Standard */
  }	
.fourty {
  filter:alpha(opacity=40); /* für IE6 + */
  opacity: 0.4 /* CSS3 Standard */
  }

RGB Farbangaben in CSS

Die Farbangaben können auch in RGB Werten mit einem Alphakanal angegeben werden (RGBA).

Transparenz - 50% Opacity

.fifty {color: rgba(86,75,71,0.50)}

Wichtig: Transparenz wird vererbt

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

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.

Tranparenz onmouseover

CSS

Für den Mouseover werden zwei klassen benötigt. .twenty setzt das Bild auf 20% transparenz. Die klasse .one-hundred stellt das Bild mit Vollton dar.

.twenty { filter:alpha(opacity=20);  opacity: 0.2; }	
.one-hundred { filter:alpha(opacity=100); opacity: 1; }

HTML

Das Bild hat die klasse .twenty und wird dadurch nur zu 20% dargestellt. Mit Java Script wird per mouseover die klasse ausgewechselt.

<img src="images/monorom.gif" class="twenty"
onmouseover="this.className='one-hundred'"
onmouseout="this.className='twenty'"/>

Tranparenz für PNG's

Modernen Browser und IE ab Version 7 haben keine Probleme PNG's mit Transparenz darzustellen. Bei transparenten PNG verändert sich die Schirft nicht. Für IE6 brauchts jedoch eine spezial Angabe.
Dei Brwoserabfrage kann über Conditional Comments effizient gelöst werden.

<!--[if IE 6]>
 <style type="text/css"> <!--
 #xy {
 background: none; /* Ohne diese Angabe gehts im IE nicht */ 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/b85.png',sizingMethod='scale');
 }
 --> </style>
 <![endif]-->