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);
其它css参考手册补充说明
HSLA
说明：
HSLA(H,S,L,A)
取值：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
说明：
HSL记法
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。
兼容性：
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持
原文链接：https://www.qiquanji.com/post/8691.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知