CSS hsla() functie

Voorbeeld

Definieer verschillende HSL-kleuren met ondoorzichtigheid:

#p1 {achtergrondkleur:hsla(120,100%,50%,0.3);} /* Groen */
#p2 {achtergrondkleur:hsla(120,100%,75%,0.3);} /* Licht groen */
#p3 {achtergrondkleur:hsla(120,100%,25%,0.3);} /* Diep groen */
#p4 {achtergrondkleur:hsla(120,60%,70%,0.3);} /* Zacht groen */

Probeer het zelf

Definitie en gebruik

De hsla() functie gebruikt het model Hue-saturation-lightness-alpha (HSLA) om kleuren te definiëren.

De HSLA-kleurenwaarde is een uitbreiding van de HSL-kleurenwaarde, met een Alpha-kanaal - dit kanaal specificeert de ondoorzichtigheid van de kleur.

Versie: CSS3

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze functie volledig ondersteunt.

functie
hsla() 1.0 9.0 3.0 3.1 10.0

CSS syntaxis

hsla(kleurtoon, verzadiging, lichtheid, alpha)
waarde beschrijving
kleurtoon Definieer het aantal graden op de kleurenwiel (van 0 tot 360) - 0 (of 360) is rood, 120 is groen, 240 is blauw.
verzadiging Definieer de verzadiging - 0% is grijs, terwijl 100% volledig kleurrijk (volledig verzadigd) is.
lichtheid Definieert helderheid - 0% is zwart, 50% is normaal, 100% is wit.
alpha Definieert de ondoorzichtigheid als een getal tussen 0.0 (volledig doorzichtig) en 1.0 (volledig ondoorzichtig).