CSS3之HSL

一、颜色表示法介绍

表示颜色除了十六进制、RGBA，还是HSL(HSLA)，其中RGBA及HSA  IE9及以上才支持(IE6/7/8需要使用十六进制表示)，因为这两种都是CSS3的新增的。

PS给我提供了5种颜色表示法，其中HSB就是我们所说的HSL。

二、HSL介绍及使用

H:色相 ，值为0-360

S:饱和度，值为百分比

L:亮度，值为百分比

如果有HSLA，A为透明度，值为0-1

HSL是一个360°的色环，60°为黄色，120°为绿色，180°为青色，240°为黄色，300°为洋红色，360°为红色，通过这个标准，你可以大致估计颜色的一个范围。

写法

三、HSL引发的一个面试题

HSLA、opacity、visibility=hidden、display=none的区别？

HSLA/RGBA 只是背景透明，元素内容没有透明效果。

opacity=0，元素被隐藏，整个元素透明，包括元素内容，不改变页面布局，若该元素已经绑定事件如click事件，若点击该区域，会触发事件。

visibility=hidden，元素被隐藏，不改变页面布局，但不会触发该元素已经绑定的事件。

display=none，元素被隐藏，会改变页面布局，可以理解成在页面中该元素被删除。

如果你需要三种表示法颜色转换，请参考：3种表示法的转换。

---

如果喜欢，不要吝啬你的爱心“❤”哦！