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.
opacity
eine relative Angabe ist, sind Prozentwerte nicht erlaubt.Anwendungsbeispiel[Bearbeiten]
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; }
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[Bearbeiten]
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.
.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); }
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[Bearbeiten]
- W3C: opacity
Das erste Element mit der Deckkraft
opacity: 0
ist nicht sichtbar; es nimmt jedoch seinen Raum im Elementfluss ein.