michaelsinterface.de
image.opacity
Die CSS3-Eigenschaft opacity kann die Deckkraft von Elementen steuern, und so transparente Elemente im Dokument erzeugen.
Da die opacity-Eigenschaft ein Bestandteil der noch nicht fertiggestellten CSS3-Spezifikation ist, wird sie von den unterschiedlichen Browsern nicht gleichermaßen unterstützt, allen voran vom IE.
Eine Transparenz lässt sich aber dennoch browserübergreifend erreichen, indem die drei gängigen Schreibweisen verwendet werden, wenngleich die beiden nicht-standardkomformen invalides CSS erzeugen.
In diesem Tutorial werden diese näher vorgestellt, und das Tauschen der Opacity-Werte beim Überfahren einer Grafik angewendet, um so einen "Rollover-Effekt" zu erzielen.
- Opacity: 1 / 100%
- Opacity: 0.5 / 50%
opacity, -moz-opacity, filter:alpha(opacity)
Grundprinzip standardkonforme Browser
Die standardkonformen Browser, wie z.B. Firefox, Konqueror, Mac Safari, Netscape 8+, Opera 9+, Safari (Win), oder SeaMonkey folgen der CSS3-Spezifikation und unterstützen die opacity-Eigenschaft.
Der zu wählende Wert liegt hier zwischen "0" (totale Transparenz) und "1" (keine Transparenz).
Grundprinzip Mozilla
Für die Familie der Mozilla-Browser stand in der Vergangenheit die Eigenschaft -moz-opacity zur Verfügung, die aber nicht zum Standard des "W3C" zählt.
Erlaubt sind hier Werte von "0.00" (totale Transparenz) bis "1.00" (keine Transparenz).
Die aktuellen Versionen von Camino, Firefox (1.x, 2.x, 3.x), Mozilla, Netscape und SeaMonkey interpretieren die standardkonforme opacity-Eigenschaft, womit die Verwendung von -moz-opacity der Vergangenheit angehört.
Grundprinzip IE
Microsoft stellt für den IE diverse "CSS-Filter" bereit, die ihren Ursprung in der Bildbearbeitung haben, aber kein Bestandteil der offiziellen CSS-Spezifikation sind.
Zur Regulierung der Transparenz steht hier der Filter filter:Alpha() zur Verfügung, der den Parameter opacity mit einer Wertangabe zur Deckkraft erwartet.
Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: das Element ist vollkommen transparent (Hintergrund scheint voll durch), der Wert 100 bedeutet: das Element ist vollkommen abdeckend (Hintergrund scheint nicht durch).
Kombination
opacity-Wert tauschen
Im HTML-Dokument wird ein Grafikelement erzeugt, und mit der ID #opacity-100 ausgezeichnet:
Anmerkung: Enthält das Dokument mehrere Grafikelemente, für die die nachfolgenden CSS-Regeln gelten sollen, wird anstelle des ID-Bezeichners ein Klassen-Bezeichner gewählt, da eine ID im HTML-Dokument eindeutig sein muß.
Im zentralen Stylesheet werden für die ID und die :hover-Pseudoklasse die gewünschten opacity-Werte festgelegt:
opacity:1;
}
img#opacity-100:hover {
opacity:.5;
}
Gemäß dem "W3C" wäre die Arbeit an dieser Stelle verrichtet, und dem Genuß stünde nichts im Wege, wenn da nicht der IE wäre, der auch in seiner aktuellen 7er-Version die opacity-Eigenschaft nicht zu interpretieren weiß, sondern wie seine Vorgänger den MS-Filter filter:alpha(opacity=[Wert]) anwendet.
Für ihn legen wir ein gesondertes Stylesheet an, das mittels eines "Conditional Comments" vor den Augen der übrigen Browser behütet wird. Wer hierbei auch die Vorgängerversionen des IE7 berücksichtigen möchte, muß mit den CSS-Selektoren zweigleisig fahren, da die aktuelle Version die allgemeine :hover-Pseudoklasse für alle HTML-Elemente interpretiert, die älteren IEs hingegen nicht, weshalb für sie eine Prise Javascript erforderlich wäre, um in ihnen diese Animation zu realisieren. Hierfür könnte beispielsweise auf die bewährte exchange.className-Methode zurückgegriffen werden.
<style type="text/css">
filter:alpha(opacity=100);
}
img#opacity-100:hover {
filter:alpha(opacity=50);
}
<![endif]-->
Quelltext
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::image.opacity:::</title>
<style type="text/css">
opacity:1;
}
img#opacity-100:hover {
opacity:.5;
}
img#opacity-50 {
opacity:.5;
}
img#opacity-50:hover {
opacity:1;
}
<!--[if IE 7]>
<style type="text/css">
filter:alpha(opacity=100);
}
img#opacity-100:hover {
filter:alpha(opacity=50);
}
img#opacity-50 {
filter:alpha(opacity=50);
}
img#opacity-50:hover {
filter:alpha(opacity=100);
}
<![endif]-->
</head>
<body>
<ul>
<li>Opacity: 1 / 100%
<ul>
<li><img src="logo.png" id="opacity-100" alt=""></li>
</ul>
</li>
<li>Opacity: 0.5 / 50%
<ul>
<li><img src="logo.png" id="opacity-50" alt=""></li>
</ul>
</li>
</ul>
</body>
</html>
