Transparenz für alle!

Mit der CSS-Eigenschaft filter klappt’s im IE schon lange mit der Transparenz, Mozilla hatte dafr die eigene Eigenschaft -moz-opacity. Mit CSS3 kommt nun noch opacity hinzu, was bereits von Gecko- und KHTML-basierten Browsern (Konqueror, Safari) unterstützt wird.
Übrig bleibt da nur der Opera, der wohl erst mit den nächsten Versionen Transparenz von Objekten unterstützen wird. Hier bleibt dann nur der Umweg über eine Browserweiche und ein entsprechendes PNG für den Opera—vielleicht nicht der schönste Weg, aber immerhin funktioniert es. Auf der Strecke bleibt man dann nur mit Browser-Dinosauriern wie Netscape 4, auf die man aber mittlerweile wohl nicht mehr unbedingt Rücksicht nehmen muss.

Beispiel


Das Original-Bild

mit 50% Transparenz und Browserweiche für den Opera

Im “Live-Betrieb” sollte man natürlich nicht unbedingt auf Inline-Styles zurückgreifen.
Um eine Deckkraft von 50% zu erreichen, wurden hier gleich 3 CSS-Eigenschaften angegeben, um auch alle unterstützenden Browser abdecken zu können:

  • opacity: .5 nimmt eine Dezimalzahl für die Deckkraft entgegen
  • -moz-opacity: .5 deckt die älteren Gecko-Browser ab
  • filter: alpha(opacity=50) ist nur für den IE gedacht

Die Mini-Browserweiche gilt nur für den Opera und liefert diesem ein entsprechendes PNG mit 50% Transparenz.

Der div-Container um das Bild muss leider sein, da einige Browser Probleme haben, wenn es sich bei dem transparenten Element nicht um einen Listenpunkt oder ein div handelt.
Das Ganze funktioniert natürlich auch mit Hintergrundfarben und Text. Bei letzterem hat man natürlich mit dem Opera ein Problem bei längeren Texten.


Ähnliche Artikel

Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.