Transparenz mittels CSS
Transparenz mit CSS für verschiedene Browser
Eine einfache Methode Bilder oder Ebenen transparent zu machen, sieht wie folgt aus:
#transparent {
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
- CSS 3 kennt die Eigenschaft opacity. Diese kann einen Wert zwischen 0 (unsichtbar) und 1 annehmen
- Mozilla Browser haben Ihre eigene browserspzifische Eigenschaft -moz-opacity, die ebenfalls einen Wert zwischen 0 und 1 annehmen kann
- Der liebe Internet Explorer (ab Version 5.5) hat auch seine browserspezifische Eigenschaft, genannt filter, mit der viele Effekte erzielt werden können. Für die Transparenz gibt es den alpha filter, dem ein opacity-Wert zwischen 0 und 100 zuzgewiesen werden kann
Um nun sicher zu stellen, dass dieser Effekt in möglichst vielen Browsern funktioniert, werden alle drei Methoden gleichzeitig eingesetzt. Nachteil dieser Vorgehensweise ist, dass die CSS-Datei dann leider nicht mehr ganz valide ist.
Eingesetzt wurde diese Technik zum Beispiel auf der Webseite der Kieferorthopädie Dres. Schrems
Popularity: 30% [?]
Vielen Dank für den Tipp!
