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 in 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;
}