CSS hsla() funktion

Exempel

Definiera olika HSL-färger med ogenomskinlighet:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Grönt */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Ljust grönt */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Mörkt grönt */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Mjukt grönt */

Prova själv

Definition och användning

hsla()-funktionen använder modellen Hue-saturation-ljusstyrka-alpha (HSLA) för att definiera färg.

HSLA-färgvärden är en utökning av HSL-färgvärden med en Alpha-kanal - denna kanal specificerar färgens opakhet.

Version: CSS3

Webbläsarstöd

Talen i tabellen anger den första webbläsaren som fullständigt stöder denna funktion.

funktion
hsla() 1.0 9.0 3.0 3.1 10.0

CSS-syntax

hsla(nyans, färgmängd, ljusstyrka, alpha)
värde beskrivning
nyans Definiera vinkeln på färgcirkeln (från 0 till 360) - 0 (eller 360) är röd, 120 är grön, 240 är blå.
färgmängd Definiera saturation - 0% är gråskala, medan 100% är färgstarkt (full saturation).
ljusstyrka Definiera ljusighet - 0% är svart, 50% är normalt, 100% är vitt.
alpha Definiera ogenomskinlighet som ett nummer mellan 0.0 (helt genomskinligt) och 1.0 (helt ogenomskinligt).