Transparente Farben

Bisher waren alle unsere Farben deckend: Nichts scheint durch sie hindurch. Eine Farbe kann aber auch teilweise transparent sein. Dann scheint das, was dahinter liegt, durch, wie durch getöntes Glas.

Die Transparenz legt ein vierter Wert fest, der Alphawert. Alpha ist eine Zahl von 0 (völlig transparent, unsichtbar) bis 1 (völlig deckend); man kann ihn auch in Prozent schreiben, von 0 % bis 100 %. Dezimalzahlen schreibt man in CSS mit einem Punkt, nicht mit einem Komma: 0.5. In RGB ist Alpha die vierte Zahl, und die Funktion heißt dann meist rgba (a wie Alpha):

p {
	background-color: rgba(255, 0, 0, 0.5);
}

Das ist ein halbtransparentes Rot: Die Hälfte dessen, was dahinter liegt, scheint durch. Auch die anderen Formate können einen Alphawert haben:

• In HSL ist er ebenfalls der vierte Wert: hsla(0, 100%, 50%, 0.5).
• In Hex ist er ein viertes Zeichenpaar, von 00 (transparent) bis ff (deckend): #ff000080 (80 = 128, etwa die Hälfte von 255).

Heute akzeptieren auch rgb und hsl einen Alphawert, das zusätzliche a ist also nicht mehr nötig. Du wirst vielleicht auch auf eine neuere Schreibweise stoßen, mit Leerzeichen und einem Schrägstrich vor dem Alphawert: rgb(255 0 0 / 50%). Alle diese Schreibweisen ergeben praktisch dasselbe halbtransparente Rot.

Eine transparente Farbe eignet sich für einen leichten Farbton, der zu den Farben ringsum passt. Wir geben dem div mit den Rassen einen Hintergrund im Grün unserer Überschriften mit einem Alphawert von 0.2: Das Grün deckt nur ein Fünftel ab, der Rest ist der helle Seitenhintergrund, der durchscheint.

Beachte, dass der Hintergrund eng um den Text liegt, der seine Ränder berührt. In der Lektion über das Box-Modell lernen wir, wie man Platz innerhalb eines Elements hinzufügt.