CSS/Tutorials/opacity

Mit der Eigenschaft opacity (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

Folgende Werte sind möglich:

• Zahlenwert zwischen 0 und 1
  Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
• inherit: gibt an, dass der Wert der Deckfähigkeit des Elternelements übernommen wird.

Beachten Sie: Obwohl der Wert für opacity eine relative Angabe ist, sind Prozentwerte nicht erlaubt.

Anwendungsbeispiel

Beispiel ansehen …

span {
  background: #dddd00;
  border: 5px solid;
  cursor: help;
  display: inline-block;
  margin: 1em 2em;
  outline: 5px solid red;
  padding: 1em 2em;
}
.o0  { opacity: 0; }
.o2  { opacity: 0.2; }
.o4  { opacity: 0.4; }
.o6  { opacity: 0.6; }
.o8  { opacity: 0.8; }
.o10 { opacity: 1; }

Das Beispiel besteht aus sechs span-Elementen, die über ihre Klassen unterschiedliche Werte für die Deckkraft haben.
Das erste Element mit der Deckkraft opacity: 0 ist nicht sichtbar; es nimmt jedoch seinen Raum im Elementfluss ein.

ansehen …

Eine derartig festgelegte Deckfähigkeit gilt dabei stets für das gesamte Element, einschließlich border und outline. Soll lediglich der Elementinhalt teiltransparent gestaltet werden, so muss auf entsprechende Hintergrundfarben zurückgegriffen werden.

Transparenter Hintergrund mit rgb + Alphakanal

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgb-Farbangaben mit einem vierten Parameter, der den Alphawert regelt, bei der Hintergrundfarbe.

Beispiel ansehen …

.o0  { background-color: rgb(255 255 255 0); }
.o2  { background-color: rgb(255 255 255 /0.2); }
.o4  { background-color: rgb(255 255 255 /0.4); }
.o6  { background-color: rgb(255 255 255 /0.6); }
.o8  { background-color: rgb(255 255 255 /0.8); }
.o10 { background-color: rgb(255 255 255 /1); }

ansehen …

Das Beispiel entspricht weitgehend dem oberen. Die Transparenz beschränkt sich aber auf den Hintergrund, der mit background-color und dem entsprechenden rgb-Wert eingefärbt wird.

Ursprünglich verwendete das Beispiel die rgba()-Funktion. Im Februar 2022 wurde es durch die einfachere rgb()-Funktion mit Leerzeichen-separierten Werten ersetzt. Der optionale vierte Wert für den Alphakanal wird mit einem Slash notiert.

Weblinks

• W3C: opacity