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 rgba

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.

Beispiel ansehen …

.o0  { background-color: rgba(255, 255, 255, 0); }
.o2  { background-color: rgba(255, 255, 255, 0.2); }
.o4  { background-color: rgba(255, 255, 255, 0.4); }
.o6  { background-color: rgba(255, 255, 255, 0.6); }
.o8  { background-color: rgba(255, 255, 255, 0.8); }
.o10 { background-color: rgba(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 rgba-Wert.

ansehen …

Weblinks

• W3C: opacity