Ü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.

Wird für diese Eigenschaft ein Wert anders als 1 festgelegt, bewirkt dies, dass das Element in einen neuen Stapelkontext versetzt wird.

Falls ein Kindelement nicht den Wert für die Deckkraft haben soll, kann stattdessen die background Eigenschaft verwendet werden. Zum Beispiel:

background: rgba(0, 0, 0, 0.4);

Initialwert1.0
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertder angegebene Wert, auf den Bereich [0,1] abgeschnitten
AnimationstypNummer
Kanonische Reihenfolgedie 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 von 0.0 bis 1.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 zwischen 0 und 1 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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: MaxValue, Sebastianz, fscholz, SJW, FredB, Jürgen Jeka, j.j., Michael2402
Zuletzt aktualisiert von: MaxValue,