A quoi sert hsla() en CSS3-Questions et réponses frontales-php.cn

A quoi sert hsla() en CSS3

青灯夜游

Libérer： 2022-03-17 18:34:20

original

1966 Les gens l'ont consulté

En CSS3, la fonction hsla() est utilisée pour définir les couleurs en utilisant la teinte, la saturation, la luminosité et la transparence. La syntaxe est « hsla (valeur de teinte, valeur de saturation, valeur de luminosité, valeur de transparence) » ; valeur de teinte La plage de valeurs est « 0 ~ 360 », la plage de valeurs de saturation et de luminosité est « 0 % ~ 100 % » et la plage de valeurs de transparence est « 0 ~ 1 ».

A quoi sert hsla() en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, la fonction de hsla() est de définir la couleur. La fonction

hsla() utilise la teinte, la saturation, la luminosité et la transparence pour définir les couleurs.

HSLA signifie Hue, Saturation, Lightness, Alpha (anglais : Hue, Saturation, Lightness, Alpha).

La teinte (H) est l'attribut de base de la couleur, c'est ce que nous appelons habituellement les noms de couleurs, comme le rouge, le jaune, etc.
La saturation (S) fait référence à la pureté de la couleur. Plus elle est élevée, plus la couleur est pure. Plus elle est basse, elle devient progressivement grise.
La luminosité (L) prend 0 à 100 %. Augmentez la luminosité et la couleur passera au blanc ; diminuez la luminosité et la couleur passera au noir.
La transparence (A) prend une valeur comprise entre 0 et 1, représentant la transparence.

Syntaxe :

hsla(hue, saturation, lightness, alpha)

Copier après la connexion

Valeur	Description
hue - Hue	Définition Hue (0 à 360) - 0 (ou 360) est rouge, 20 est vert, 2 40 est couleur bleue
saturation - saturation	définit la saturation ; 0% est gris, 100% est pleine couleur
luminosité - luminosité	définit la luminosité 0% est sombre, 50% est normal, 100 % est blanc
alpha - Transparence	Définir la transparence 0 (entièrement transparent) ~ 1 (entièrement opaque)

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>

<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>

Copier après la connexion

A quoi sert hsla() en CSS3