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

Tipps und Tricks: Transparente Bilder

Beispiel

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

Internet Explorer 5.x, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8 Opera 9.x 
<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; 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 75% eingestellt, so dass der Hintergrund durchscheint.

-moz-opacity: akzeptiert Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz),
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).

Diese Eigenschaften gehören nicht zur CSS-Spezifikation. Einzig opacity ist ein Vorgriff auf CSS3.

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 bis einschliesslich Version 8 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.