Maison >interface Web >Questions et réponses frontales >A quoi sert hsla() en CSS3

A quoi sert hsla() en CSS3

青灯夜游original: 2022-03-17 18:32:242022parcourir

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 ».

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)

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>

A quoi sert hsla() en CSS3

(Partage vidéo d'apprentissage : css vidéo tutoriel , front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les filtres supportés par CSS3 ?Article suivant：Quels sont les filtres supportés par CSS3 ?

Articles Liés

Voir plus