manuel de référence CSS

CSS @règles (RULES)

大全 des propriétés CSS

CSS hsla() 函数

在线示例

定义 HSL 颜色，并设置透明度：

示例

<!DOCTYPE html>
<title>基础教程(oldtoolbag.com)</title>　
<style>
body {
　　　　background: url('/run/images/bg2.png'); beige;
　　　　color: hsla(0, 0%, 0%,　1);
　　　　font-size:　2em;
　}
article {　
　　　　background-color: hsla(30,　100%,　50%, 0.5);
　　　　border:　5px solid darkorange;
　　　　margin:　20px;
　　　　text-align: center;
　　　　}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>

Testez et voyez ‹/›

Définition et utilisation

La fonction hsla() utilise la teinte, la saturation, la luminosité et la transparence pour définir la couleur.

HSL signifie teinte, saturation, luminosité, transparence (en anglais : Hue, Saturation, Lightness, Alpha ).

Teinte (H)C'est une propriété fondamentale de la couleur, c'est ce que l'on appelle généralement le nom de la couleur, par exemple rouge, jaune, etc.
Saturation (S)C'est la pureté de la couleur, plus la couleur est pure, plus elle est pure, et elle devient progressivement grise, prenez 0-10Valeur 0%.
Luminosité (L) Prendre 0-100%, augmente l'éclat, la couleur change vers le blanc ; diminue l'éclat, la couleur change vers le noir.
Transparence (A) Valeur 0~1 représentent la transparence.

Version prise en charge : CSS3

Compatibilité du navigateur

Les nombres dans le tableau représentent la première version du navigateur prenant en charge la fonction.

Fonction
hsla()	1.0	9.0	1.0	3.1	9.5

Syntaxe CSS

hsla(hue, saturation, luminosité, alpha)

Valeur	Description
hue - Teinte	Définir le teinte (0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu
saturation - Saturation	Définir la saturation; 0% est gris, 100% est pleine couleur
luminosité - Éclat	Définir l'éclat 0% comme sombre, 50% est normal, 100% est blanc
alpha - Transparence	Définir la transparence 0 (complètement transparent) ~ 1(Complètement opaque)

Variations Alpha

Voici un exemple de répétition multiple de la même couleur (sur l'image de fond), mais chaque couleur a une valeur alpha différente.

Toutes les autres valeurs sont identiques (c'est-à-dire, les teintes, les saturations et les éclairages de toutes les lignes sont identiques), seule la canal alpha change.

Cela indique que avec l'augmentation de la valeur alpha, l'image de fond devient de plus en plus invisible (les étoiles sont l'image de fond).

Bleu

`hsla(240, 100%, 50%, 0)`
`hsla(240, 100%, 50%, 0.1)`
`hsla(240, 100%, 50%, 0.2)`
`hsla(240, 100%, 50%, 0.3)`
`hsla(240, 100%, 50%, 0.4)`
`hsla(240, 100%, 50%, 0.5)`
`hsla(240, 100%, 50%, 0.6)`
`hsla(240, 100%, 50%, 0.7)`
`hsla(240, 100%, 50%, 0.8)`
`hsla(240, 100%, 50%, 0.9)`
`hsla(240, 100%, 50%, 1)`

Définir HSL

Comparé au modèle RGB, le modèle de couleur HSL est plus intuitif pour définir les couleurs. En particulier, une fois que vous connaissez le principe de fonctionnement de HSL.

J'ai déjà écrit sur hsl() Le contenu de la fonction, qui explique hsla()Les fonctionnalités sont plus détaillées que celles décrites ici. Si vous n'êtes pas sûr de comment configurer et ajuster la couleur de base, veuillez vérifier.

Fonction CSS

Règle @charset CSS Fonctions CSS