Tipps und Tricks: Transparente Hintergründe
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.
,
,
,
<html>
<head>
<title>Transparente Hintergründe</title>
<style type="text/css">
#div1 {
position:absolute;
top:50px;left:250px;
width:150px;height:150px;
border:1px solid #000000;
background-color:#6666aa;
z-index:1;
}
#div2 {
filter:alpha(opacity=80);
-moz-opacity:0.8;
position:absolute;
top:100px;left:350px;
width:150px; height:150px;
border:1px solid #000000;
background-color:#6666aa;z-index:2;
}
</style>
</head>
<body>
<div id="div1">
Ein <div>-Bereich mit transparentem Hintergrund.
</div>
<div id="div2">
Ein <div>-Bereich mit transparentem Hintergrund.
</div>
</body>
</html>
In diesem Beispiel werden zwei <div>-Bereiche so positioniert, dass sie sich überlappen. Für den zweiten <div>-Bereich, der den ersten überlappt, wird zusätzlich zur Hintergrundfarbe die Transparenz auf 80% eingestellt, so dass der erste 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
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.