Hier bist Du: Home « Tipps und Tricks « Transparente Bilder
 

Tipps und Tricks: Transparente Bilder

Beispiel

Einen interessanten Effekt bieten der Internet Explorer, Mozilla und der Netscape. Mit der Eigenschaft -moz-opacity: für die Geckos und filter:alpha(opacity=) für den IE lässt sich die Transparenz (Opazität) eines Elements einstellen.

Internet Explorer 5.x, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8 
<html>
<head>
<title>Transparente Bilder</title>
</head>
<body>
<div style="position:absolute;top:100px;left:350px;">
<img src="bild.gif" width="200" height="162" 
style="filter:alpha(opacity=75); -moz-opacity: 0.75;">
</div>
</body>
</html>

In diesem Beispiel wird ein <div>-Bereich mit einem Bild auf der Seite positioniert. Die Transparenz des Bildes wird auf 80% eingestellt, so dass der Hintergrund durchscheint.

-moz-opacity: akzeptiert Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz), filter:alpha(opacity=) Werte von 0 (totale Transparenz) bis 100 (keine Transparenz).

Browser

Microsoft sagt, dass die Transparenz mit filter:alpha erst ab dem Internet Explorer 5.5 zur Verfügung steht. Mein IE 5.0 kennt es aber auch...
Der Opera und der Netscape 4.x kennen diese Eigenschaften nicht. Du solltest also auf jeden Fall die Seiten mit diesen Browsern anschauen und prüfen ob das Design trotzdem OK ist.