Übersicht
Die opacity
CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.
Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.
Falls ein Kindelement nicht den Wert für die Deckkraft haben soll - kann stattdessen folgendes verwendet werden:
background: rgba(0, 0, 0, 0.4);
Using this property with a value different than 1
places the element in a new stacking context.
Initialwert | 1.0 |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | der angegebene Wert, auf den Bereich [0,1] abgeschnitten |
Animierbar | ja, als Nummer |
Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
/* Komplett undurchsichtig */ opacity: 1; opacity: 1.0; /* Durchscheinend */ opacity: 0.6; /* Komplett transparent */ opacity: 0.0; opacity: 0; /* Globale Werte */ opacity: inherit; opacity: initial; opacity: unset;
Werte
<number>
- Ist eine
<number>
im Bereich von0.0
bis1.0
, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs.Wert Bedeutung 0
Das Element ist vollkommen transparent (d. h. unsichtbar). Irgendeine <number>
genau zwischen0
und1
Das Element ist durchsichtig (d. h. der Hintergrund scheint durch). 1
Das Element ist vollkommen opak (blickdicht).
Formale Syntax
<number>
Beispiele
Einfaches Beispiel
div { background-color: yellow; } .light { opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */ } .medium { opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */ } .heavy { opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */ }
<div class="light">Dies kann kaum gesehen werden.</div> <div class="medium">Dies ist einfacher zu sehen.</div> <div class="heavy">Dies ist sehr deutlich sichtbar.</div>
Andere Deckkraft mit :hover
img.opacity { opacity: 1; filter: alpha(opacity=100); /* IE8 and lower */ zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Transitions Die Definition von 'opacity' in dieser Spezifikation. |
Arbeitsentwurf | Definiert opacity als animierbar. |
CSS Color Module Level 3 Die Definition von 'opacity' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.0 | 1.0 (1.7 oder früher)[1] | 9.0[2] 8.0 4.0 |
9.0 | 1.2 (125)[3] |
Merkmal | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.0 | 1.0 (1.7)[1] | 9.0[2] 8.0 4.0 |
9.0 | 3.2 |
[1] Vor Gecko 1.7 (Firefox 0.9) wurde die -moz-opacity
Eigenschaft auf eine nicht standardkonforme Weise (vererbt) implementiert. Mit Firefox 0.9 wurde das Verhalten geändert und die Eigenschaft wurde in opacity
umbenannt. Seit diesem Zeitpunkt wurde -moz-opacity
nur als Alias für opacity
unterstützt.
Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) und neuer unterstützen -moz-opacity
nicht und die Unterstützung für MozOpacity
in JavaScript wurde in Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) entfernt. Es sollte daher nur noch opacity
verwendet werden.
[2] Vor Version 9 hat Internet Explorer opacity
nicht unterstützt. Stattdessen wurde eine filter
Eigenschaft mit alpha(opacity=xx)
oder "alpha(opacity=xx)"
als Wert (beide sind Synonyme) unterstützt. IE 4 bis 9 unterstützen die erweiterte Form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
. IE 8 hat -ms-filter
eingeführt, welches ein Synonym für filter
darstellt. Beide wurden in IE 10 entfernt.
[3] Ähnlich zu -moz-opacity
wurde -khtml-opacity
seit 2004 für tot erklärt (Safari 1.2).
Konqueror hat -khtml-opacity
niemals unterstützt und unterstützt dafür opacity
seit Version 4.0.