快速了解CSS3当中的HSLA 颜色值怎么算(css css3)

大家好！今天让小编来大家介绍下关于快速了解CSS3当中的HSLA 颜色值怎么算的问题，以下是酷知号的小编对此问题的归纳整理，让我们一起来看看吧。

CSS3文档中提到：（HSLA）

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。

S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高

L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。

A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

这样一说大家肯定是很迷的一个概念

举点例子吧：（只要区分中间的百分比值）

这是标准的绿色值：

background-color:hsla(120,50%,50%,1); 

——————————————————–

这样就会变成白色：

background-color:hsla(120,50%,100%,1); 

——————————————————–

这样就会变成黑色：

background-color:hsla(120,50%,0%,1); 

——————————————————–

这样就会变成明亮的绿色：

background-color:hsla(120,100%,50%,1); 

——————————————————–

我们发现第三个值>50%就加白色（原本的基础上多了白色），<50%就加黑色（原本的基础上多了黑色）：

background-color:hsla(120,100%,20%,1);

——————————————————–

这样就会变成明亮的灰色：

background-color:hsla(120,0%,50%,1);

—————————————————————–

我们发现第二个值>50%就加亮（原本的基础上绿色更明显），<50%就加暗（原本的基础上绿色更少更淡）：

background-color:hsla(120,20%,50%,1);

——————————————————–

以上就是小编对于快速了解CSS3当中的HSLA 颜色值怎么算问题和相关问题的解答了，快速了解CSS3当中的HSLA 颜色值怎么算的问题希望对你有用！