CSS: Transparente Hintergrundfarbe mit background-color

Statt einem transparenten oder halbtransparentem Hintergrundbild kann man mit CSS auch eine mehr oder weniger stark transparente Hintergrundfarbe mit background-color wählen: Die verdeckt dann ein Hintergrundbild nur leicht: So ist sowohl der Hintergrund als auch Text im Vordergrund noch zu erkennen.

Statt der sonst üblichen RGB-Werte im HEX-Format gibt man diese als RGBA an: Neben den drei RGB-Farbwerten gibt der letzte Wert die Transparenz an. Dies hat den Vorteil, dass nur die Hintergrund-Farbe eine Transparenz enthält, nicht aber der Vordergrund: Würde man mit “opacity” die Transparenz des gesamten Elements bearbeiten, würde sich das auch auf den Vordergrund auswirken. Wie dieser Unterschied aussieht, zeigen wir weiter unten!

Hintergrundfarbe “normal”:

background-color:#FFFFFF;

Hintergrundfarbe mit Transparenz:

background-color:rgba(255,255,255,0.2);

Der vierte Wert steht für den Alpha-Kanal, also die Transparenz. Hier sind Werte zwischen 0 und 1 möglich: Je höher der Wert, desto weniger sieht man den Hintergrund durch.

 
Beispiel: So sieht es aus:

background-color:rgba(255,255,255,0.2);

background-color:rgba(255,255,255,0.5);

opacity:0.2;background-color:#FFFFFF;