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:
Dies ist ein Test für die Hintergrund-Farbe mit Transparenz
|
Weißer, transparenter Hintergrund:
background-color:rgba(255,255,255,0.2);
|
Dies ist ein Test für die Hintergrund-Farbe mit Transparenz
|
Weißer, transparenter Hintergrund:
background-color:rgba(255,255,255,0.5);
|
Dies ist ein Test für die Hintergrund-Farbe mit Transparenz
|
Weißer, transparenter Hintergrund. Hier ist das ganze DIV Element transparent, nicht der Hintergrund:
opacity:0.2;background-color:#FFFFFF;
|