Comme ARGB, il est utilisé pour représenter les couleurs. L'effet est le même, seule la forme est différente.
Dans des circonstances normales, vous n'avez pas besoin de l'utiliser, car vous utilisez généralement davantage l'ARGB et le connaissez mieux. Cependant, certains livres aiment utiliser ce formulaire, vous devez donc toujours le comprendre.
définition
La fonction hsla() définit une couleur en utilisant la teinte, la saturation, la luminosité et la transparence.
HSLA signifie Hue, Saturation, Lightness, Alpha (en anglais : Hue, Saturation, Lightness, Alpha).
La teinte (H) est l'attribut de base de la couleur, qui est le nom de la couleur, comme le rouge, le jaune, etc.
La saturation (S) fait référence à la pureté de la couleur, plus la couleur est élevée, plus la couleur est pure et plus elle deviendra progressivement grise, prenant la valeur de 0 à 100%.
La luminosité (L) varie de 0 à 100 %, en augmentant la luminosité, la couleur passera au blanc ; en diminuant la luminosité, la couleur passera au noir.
La transparence (A) va de 0 à 1, représentant la transparence.
usage
Prenez le style #p4 vert pastel par exemple. 120 signifie vert (teinte), 60 % signifie saturation (en fait, c'est la concentration de couleur) et 70 % signifie luminosité. 0,3 signifie transparence.
#p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿 */
#p3 {background-color:hsl(120,100%,25%,0.3);} /* 暗绿 */
#p4 {background-color:hsl(120,60%,70%,0.3);} /* 柔和的绿色 */
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
<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>
