opacity

├ť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
Berechneter Wertder angegebene Wert, auf den Bereich [0,1] abgeschnitten
AnimationstypNummer

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

<alpha-value>

wobei
<alpha-value> = <number> | <percentage>

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

BCD tables only load in the browser

Siehe auch