Fonction hsla() CSS
Exemple
Définir une couleur HSL et définir la transparence :
#p1 {background-color:hsl(120,100%,50%,0.3);} /*vert*/
#p2 {background-color:hsl(120,100%,75%,0.3);} /*vert clair*/
#p3 {background-color:hsl(120,100%,25%,0.3);} /*vert foncé*/
#p4 {background-color:hsl(120,60%,70%,0.3);} /*vert doux*/
Essayez-le vous-même »
Définition et utilisation
La fonction hsla() utilise la teinte, la saturation, la luminosité et l'alpha pour définir une couleur.
HSLA signifie teinte, saturation, luminosité, alpha.
- Teinte (H)La teinte est une propriété de base de la couleur ; c'est le nom de couleur couramment utilisé, comme rouge, jaune, etc.
- Saturation (S)La saturation désigne la pureté de la couleur. Plus elle est élevée, plus la couleur est pure ; plus elle est faible, plus elle vire progressivement au gris, avec des valeurs de 0-100%.
- Luminosité (L)Elle prend des valeurs de 0-100%. Augmenter la luminosité déplace la couleur vers le blanc ; diminuer la luminosité déplace la couleur vers le noir.
- Opacité (A)Elle prend une valeur entre 0 et 1, représentant la transparence.
Versions prises en charge : CSS3
Prise en charge des navigateurs
Les nombres du tableau représentent le premier numéro de version de navigateur prenant en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
Syntaxe CSS
hsla(hue, saturation, lightness, alpha)
| Valeur | Description |
|---|---|
| teinte - teinte | Définit la teinte (0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu. |
| saturation - saturation | Définit la saturation ; 0% est gris, 100% est la couleur pleine. |
| luminosité - éclat | Définit la luminosité ; 0% est sombre, 50% est normal, 100% est blanc. |
| alpha - opacité | Définit la transparence, de 0 (entièrement transparent) à 1 (entièrement opaque). |
autres extensions