CSS: Halbtransparenz im Web

Elegant und schick: halbtransparente Web-Elemente würden schick aussehen. Leider hat jeder Browser seinen eigenen Befehl zum Umsetzen und die richtige CSS Anweisung „opacity: 0.5“ beherrscht zur Zeit nur der Safari. Auch die Idee, solche Probleme mit halbtransparent gespeicherten PNG-Bildern im Hintergrund zu umgehen, scheitern leider an dem Brower aus Redmond.

Damit der Code auch mit älteren Versionen von Mozilla und IE funktioniert, muss man die jeweiligen CSS Attribute zusammen nutzen:


filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;


Damit der Inhalt des transparenten Layers trotzdem zu 100% sichtbar ist, ist es am einfachsten, einen zweiten Layer oben auf zu legen:


#logobox {
margin: 0pt;
background-color:white;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
position:absolute; top:27px; right:3px; width:100px; height:100px;
}

#logo {
margin: 0pt;
position:absolute; top:27px; right:3px; width:100px; height:100px;
}