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.注意事项

注意兼容问题哦
在这里插入图片描述

发布了60 篇原创文章 · 获赞 66 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/u012436704/article/details/85240594
今日推荐