Transparenz mittels CSS

Transparenz mit CSS für verschiedene Browser

Eine einfache Methode Bilder oder Ebenen transparent zu machen, sieht wie folgt aus:

#transparent {
-moz-opacity: 0.6;
-webkit-opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}

  1. CSS 3 kennt die Eigenschaft opacity. Diese kann einen Wert zwischen 0 (unsichtbar) und 1 annehmen.
  2. Mozilla Browser haben Ihre eigene browserspzifische Eigenschaft -moz-opacity, die ebenfalls einen Wert zwischen 0 und 1 annehmen kann.
  3. 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. Der -ms- Filter kann für ältere Internet Explorer Versionen wie 5 und 6 verwendet werden.
  4. -webkit- ist für Google Chrome.

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

2 Kommentare “Transparenz mittels CSS

  1. Das stimmt leider, die Transparenz vererbt sich auf den Inhalt des Containers und lässt sich auch mit beispielsweise:

    #transparent p {
    color: #ffff00;
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    }

    nicht rückgängig machen. Einzige Lösung die mir einfällt, wäre es den Text absolut positioniert über den transparenten Container zu legen, das p wäre also in diesem Fall dann außerhalb von #transparent.

  2. Warum vererbt sich die Transparenz auf die Schriftfarbe.Kann ich das irgendwie beheben?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.