Transparenz mittels CSS

Victor Hugo:

Ein Traum ist unerlässlich, wenn man die Zukunft gestalten will.

LautundKlar Webdesign Blog

Weblog zum Thema Webdesign, auf dem wir in unregelmäßigen Abständen zu interessanten Artikeln verweisen und Tipps zu bestimmten Problemen (Webdesign, CSS, PHP, JavaScript, Typo3 etc.) geben wollen.

Mittwoch, 24. Januar 2007

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% [?]

Kommentare (2)

2 Kommentare »

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

Kommentar von peter p

9. April 2008 @ 20:58

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.

Kommentar von Andreas Jobst

10. April 2008 @ 11:53

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack-URI