Transparenzwert für den IE berechnen

Immer wieder gern gesehenes Element einer Webseite sind halbstransparente Bereiche. Dabei muss man aufpassen, weil sich Transparenz auf die Kindelemente vererbt. Grundsätzlich empfehlen sich für ihre Umsetzung zwei Strategien, je nachdem ob man Rücksicht auf den IE6 nehmen will/muss oder nicht:

Glücklicherweise entscheiden sich mehr und mehr Kunden dafür, daß eine Seite nicht mehr in jedem Browser gleich aussehen muss und dass man weniger Rücksicht auf den IE6 nehmen sollte. Deshalb habe ich gerade in einem Projekt einen halbtransparenten Container mit der zweiten Methode erstellt.

Doch diese Methode hat ihre Tücken. Für den IE vergeben wir einen Wert, der eine Kombination aus Farbe und Transparenz ist. Der Transparenzwert ist dabei die hex-Umrechnung des normalen Zahlenwertes. Doch wie komme ich an den hex-Wert?

Robert Nyman beschreibt eine Methode, die schnell in Firebug funktioniert. In der dortigen Konsole gibt man eine kleine Zeile Javascript ein. Zur Umrechnung eines 30%igen Transparenzwertes (opacity: 0.3) lautet die Zeile:
Math.floor(0.3 * 255).toString(16);

3 Kommentare

  1. Ich nehm für sowas meistens lieber ein 24er PNG. Wirkt sich dann wirklich nur auf den Hintergrund aus und man spart sich die komischen IE-Filter. Der IE6 kriegt dann halt ne Extrawurst gekocht, wenn es unbedingt sein muss.

  2. Ich hab da mal für halbtransparente Hintergründe ein Tool geschrieben, das einem die ganze Umrechnungsarbeit erspart. Die Methode funktioniert auch mit einem filter für den IE und standardkonforme Browser bekommen ein halbtransparentes 1px-PNG per data-URI.

  3. Ich setze halbtransparente Hintergründe bisher selten ein. Nur wenn sie z.B. von einem WordPress-Plugin mitgeliefert werden, setze ich sie ein. Ich denke, dass man Anpassungen an den IE6 nicht mehr machen sollte. Wer so einen alten Browser benutzt bekommt die Seite eben nicht im Original zu sehen.