CSS hsla()-Funktion
Beispiel
HSL-Farbe definieren und Transparenz festlegen:
#p1 {background-color:hsl(120,100%,50%,0.3);} /*grün*/
#p2 {background-color:hsl(120,100%,75%,0.3);} /*hellgrün*/
#p3 {background-color:hsl(120,100%,25%,0.3);} /*dunkelgrün*/
#p4 {background-color:hsl(120,60%,70%,0.3);} /*weiches Grün*/
Selbst ausprobieren »
Definition und Verwendung
Die Funktion hsla() verwendet Farbton, Sättigung, Helligkeit und Alpha, um eine Farbe zu definieren.
HSLA steht für Farbton, Sättigung, Helligkeit, Alpha.
- Farbton (H)Der Farbton ist eine grundlegende Eigenschaft der Farbe, also der allgemein bezeichnete Farbname, wie Rot, Gelb usw.
- Sättigung (S)Die Sättigung bezieht sich auf die Reinheit der Farbe. Je höher sie ist, desto reiner ist die Farbe; je niedriger sie ist, desto mehr geht sie allmählich ins Graue über, wobei Werte von 0-100% angenommen werden.
- Helligkeit (L)Sie nimmt 0-100% an. Eine Erhöhung der Helligkeit verschiebt die Farbe in Richtung Weiß; eine Verringerung der Helligkeit verschiebt die Farbe in Richtung Schwarz.
- Deckkraft (A)Sie nimmt einen Wert zwischen 0 und 1 an und gibt die Transparenz an.
Unterstützte Versionen: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversionsnummer an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS-Syntax
hsla(hue, saturation, lightness, alpha)
| Wert | Beschreibung |
|---|---|
| hue - Farbton | Definiert den Farbton (0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau. |
| saturation - Sättigung | Definiert die Sättigung; 0% ist Grau, 100% ist Vollfarbe. |
| lightness - Helligkeit | Definiert die Helligkeit; 0% ist dunkel, 50% ist normal, 100% ist weiß. |
| alpha - Deckkraft | Definiert die Transparenz, von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). |
Weitere Erweiterungen