CSS 3: Transparenz ohne Tricks

Zu den besonders beliebten und deshalb schon heute sehr viel benutzten CSS 3-Eigenschaften gehört die Transparenz (opacity). Sie legt  den Grad der Transparenz eines Elements fest. Der Wertebereich geht von 0 bis 1, und je niedriger der Wert ist, umso durchsichtiger wird das Element. Die Zuweisung geschieht einfach mit:

< div class=”halbdurchsichtig”></div>.

Der CSS-Code dazu lautet:

.halbdurchsichtig {

opacity: 0.5;

}

Und schon klappt es in allen modernen Browsern – bis auf den Internet-Explorer von Microsoft.  In der neuen Version 9 funktioniert das auch mit dem Microsoft-Browser, aber für die älteren Versionen brauchen Sie spezielle Microsoft-Filter, eins für den Internetexplorer 8 und ein weiteres für Versionen unter 8. Erweitern Sie den Style für die Klasse “halbdurchsichtig” wie folgt

.halbdurchsichtig {

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

filter: progid:DXImageTransform. Microsoft.Alpha(Opacity=50);

zoom: 1;

opacity: 0.5;

}

und die Microsoft-Browser zeigen das DIV-Element jetzt auch halbdurchlässig an.