opacity: Deckkraft von Elementen
Anzeige Hier werben
opacity
Werte: 0 bis 1
Standardwert: 1
Vererbung: Nein
Anwendbar auf: alle Elemente
CSS-Level: CSS3
Die CSS3 Eigenschaft opacity (engl. Deckkraft) kann die Deckkraft von Elementen steuern. Dadurch ist es möglich transparente Objekte zu erzeugen.
Transparenz verschiedenen Browser
Da die Eigenschaft keiner fertigen Spezifikation angehört, wird sie noch nicht von allen Browsern gleich unterstützt. Mit verschiedenen Eigenschaften lässt sich Transparenz aber in allen Browsern erreichen indem man alle Schreibweisen verwendet.
| Eigenschaft und Beispielwert |
Browser |
Anmerkung |
opacity: 0.2; |
Opera, Safari, Firefox ab 3.0 |
CSS3 Syntax, Wert zwischen 0 (transparent) und 1 (deckend) |
-moz-opacity: 0.2; |
Mozilla Firefox 2 |
-moz- Schreibweise für Browserspezifische Erweiterungen (da CSS3 Spezifikation noch nicht fertig) |
filter: Alpha(opacity=20); |
Internet Explorer |
Wert zwischen 0 (transparent) und 100 (deckend) |
Für den Internet Explorer muss das Objekt entweder eine feste Breite oder eine feste Höhe besitzen (außer dem img-Tag).
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style type="text/css">
div
{
filter: Alpha(opacity=70);
opacity: 0.2;
moz-opacity: 0.2;
background: #b00;
height: 300px; /* Internet Explorer */
}
</style>
<div>
Ein bisschen Text
</div>
|
Komplementär in JavaScript
1 2 3 | element.style.filter = "Alpha(opacity=30)"; /* Internet Explorer */
element.style.opacity = 0.2; /* Safari, Opera */
element.style.MozOpacity = 0.2; /* Firefox */
|
Weiterführend
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "opacity: Deckkraft von Elementen" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "opacity: Deckkraft von Elementen" hier bearbeiten.
Holger V
meggs
Thomas H
Fabian "q-rios" Krause-Willenberg
David Danier
Moritz Kern
-moz-opacity ist valid
Obwohl der CSS Validator -moz-opacity als nicht valid betrachtet, ist es valid. Das liegt darin, dass alle Eigenschaften, die mit einem - beginnen, trotzdem valid sind, auch wenn sie nirgend definiert sind, da es Browsererweiterungen sind. Mehr dazu in der CSS 2.1 Spezifikation unter Vendor-specific extensions.
Re: -moz-opacity ist valid
Hat mich auch schon gestört. Deshalb habe ich auch den Artikel Anbieterspezifische CSS-Eigenschaften geschrieben.
Habs jetzt mal hier verlinkt.
Re: -moz-opacity ist valid
Dann schreibs dazu? :P
Tipp
Du hast vergessen zu sagen, dass Filter ebenfalls nicht valid ist. Desweiteren ist -khtml-opacity dermassen veraltet, dass du das ganz weglassen kannst. Safari unterstützt opacity seit Version 2, welche vor 3 Jahre raus kam. Mitlerweile ist Safari auf Version 3. Daher ist Konqueror höchstwahrscheinlich auch schon längst auf opacity umgestiegen. Können die letzten paar Versionen von Firefox nicht auch opacity? Und dass 0.7 auch als .7 geschrieben werden kann ist wohl überflüssig zu schreiben, das lernt man ja in der Schule ;)
Re: Tipp
Ich konnts leider nicht testen. Ich hab keinen Safari und keinen Konquoror, da war nur noch was im Hinterkopf.
Also mein Firefox kann kein opacity.
Re: Tipp
Mein Firefox (2.0.0.11 unter Linux) kann opacity, Konqueror (3.5.8) kann weder opacity, noch -khtml-opacity (Quelle: http://konqueror.kde.org/css/ ). Vielleicht ändert sich da was mit KDE4.
Ich nehme ihn deshalb mal aus der Liste raus.