Fonction hsla() CSS

exemple

Définir différentes couleurs HSL avec une opacité :

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Vert */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Vert clair */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Vert foncé */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Vert clair */

Essayez-le vous-même

définition et utilisation

La fonction hsla() utilise le modèle de modèle de teinte-saturation-luminosité-alpha (HSLA) pour définir la couleur.

La valeur de couleur HSLA est une extension de la valeur de couleur HSL, avec un canal Alpha - ce canal spécifie l'opacité de la couleur.

version : CSS3

prise en charge du navigateur

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette fonction entièrement.

fonction
hsla() 1.0 9.0 3.0 3.1 10.0

grammaire CSS

hsla(teinte, saturation, luminosité, alpha)
valeur description
teinte Définir l'angle sur la roue des couleurs (de 0 à 360) - 0 (ou 360) est le rouge, 120 est le vert, 240 est le bleu.
saturation Définir la saturation - 0% est le gris, tandis que 100% est la couleur pleine (complètement saturée).
luminosité Définir la luminosité - 0% est noir, 50% est normal, 100% est blanc.
alpha Définir l'opacité, un nombre entre 0,0 (complètement transparent) et 1,0 (complètement opaque).