Transparenz lässt sich über eine eigene Eigenschaft oder über den Alphakanal einer Farbe herstellen. Der Unterschied ist größer, als er aussieht.
- Transparenz (Opacity / Alphakanal)
Durchsichtigkeit eines Elements oder einer Farbe.
Beispiel: „Transparenz über opacity betrifft das ganze Element, über den Alphakanal nur die betroffene Farbe.“Auch: Opazität.
Der entscheidende Unterschied
.ganz-blass { opacity: 0.5; } /* auch der Text */
.nur-flaeche { background: rgb(0 120 255 / 0.5); }Die Eigenschaft wirkt auf das Element samt allem darin, auch auf Schrift und Symbole. Der Alphawert in der Farbangabe betrifft nur diese eine Farbe. Wer einen halbdurchsichtigen Kasten mit gut lesbarem Text will, braucht den zweiten Weg.
Nebenwirkung
Ein Wert unter eins erzeugt einen eigenen Stapelkontext. Das erklärt Fälle, in denen ein Element mit hohem Z-Index trotzdem hinter einem anderen liegt.