funzione hsla() CSS

esempio

Definire diversi colori HSL con opacità:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* verde */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* verde chiaro */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* verde scuro */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* verde pallido */

prova personalmente

definizione e uso

La funzione hsla() utilizza il modello Hue-saturation-luminosità-alpha (HSLA) per definire il colore.

Il valore di colore HSLA è un'estensione del valore di colore HSL, con un canale alpha - questo canale specifica l'opacità del colore.

versione: CSS3

supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente questa funzione.

funzione
hsla() 1.0 9.0 3.0 3.1 10.0

sintassi CSS

hsla(tonalità, saturazione, luminosità, alpha)
valore descrizione
tonalità Definizione del grado sulla ruota dei colori (da 0 a 360) - 0 (o 360) è rosso, 120 è verde, 240 è blu.
saturazione Definizione della saturazione - 0% è grigio, mentre 100% è colore pieno (completamente saturato).
luminosità Definire la luminosità - 0% è nero, 50% è normale, 100% è bianco.
alpha Definire l'opacità come numero tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).