CSS中hsla的用法

hsla是css3引入的一个颜色表达方式，今天就来学习一下它的用法。

1.什么是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之间。

直白点讲，H就是来控制颜色的变化（这个最好理解），S就是控制颜色的浓淡，L来控制亮度，100%是白色，0%是黑色，不论是那种颜色或者饱和度，A是透明度。

2.怎么去使用HSLA

background-color: hsla(0,0%,0%,0.5);

使用的方式和rgb没有区别，但是内心要熟知0-360对应的颜色，以120为梯度，按照rgb的顺序，0和360对应R，其实也很好记。

3.什么时候使用HSLA

首先要知道HSLA与RGBA本质上是没有区别的，二者均能实现等价的效果，但是有些技巧是要知道的：

1. HSLA的黑色与白色，只需将L调整为0%或者100%即可，其他不用管
2. 灰色只需将S设置为0%，此时效果至于LA有关，H无关
3. 很直观，不用进行10进制和16进制的转换

4.注意事项

注意兼容问题哦