Deckkraft

Neben transparenten Farben kennt CSS die Eigenschaft opacity. Sie macht ein ganzes Element durchsichtig, samt allem, was darin ist: seinem Text, seinem Hintergrund und allen Elementen darin. Ihr Wert ist eine Zahl von 0 (unsichtbar) bis 1 (völlig deckend, der Standard):

h1 {
	opacity: 0.5;
}

Wie unterscheidet sie sich von einer Farbe mit Alphawert? Ein Alphawert wirkt sich nur auf die eine Farbe aus, in die wir ihn schreiben. Vergleiche diese zwei Beispiele. Das erste hat einen magentafarbenen Hintergrund mit einem Alphawert von 0.5 und weißen Text, das zweite einen magentafarbenen Hintergrund, weißen Text und opacity: 0.5:

background-color: rgba(255, 0, 229, 0.5)

opacity: 0.5

Im ersten Beispiel ist nur der Hintergrund transparent, und der Text bleibt leuchtend weiß. Im zweiten ist der Text zusammen mit dem Hintergrund verblasst.

Soll also nur der Hintergrund (oder nur der Text) durchsichtig sein, verwende eine Farbe mit Alphawert. Willst du ein ganzes Element ausblenden, verwende opacity. Sie wird oft für Effekte mit :hover benutzt, das du aus der Lektion über Selektoren kennst. Wir lassen die Liste der Rassen etwas verblassen, und jede Rasse leuchtet auf, wenn du den Mauszeiger darüber bewegst.