CSS: Halbtransparenz im Web


Montag, 09.01.2006, 11:43 Uhr. Trackback | Zur Startseite.

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;

Transparenter Hintergrund mit CSS – ohne PNG

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




 Ähnliche Beiträge zu '

CSS: Halbtransparenz im Web

'