今天看到一个新的定义颜色属性HSL,以前没有用到,这里备注学习下
【概述】
像十六进制和RGB定义颜色一样,css3还支持HSL(色调Hue,饱和度saturation,亮度Lightness的定义方式
【兼容】
支持的浏览器有Chrome,Opera 9.5, Safari 3, Konqueror 和 Mozilla ,IE8及以下版本不支持
【详解】
采用hsl的方式,有三个参数值:色调Hue,饱和度saturation,亮度Lightness
①hue(色调):0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其他颜色;
②Saturation(饱和度):取值为0%到100%之间的值;
③Lightness(亮度):取值为0%到100%之间的值
【语法】
1 . 红色背景
background-color: hsl(0,100%, 50%);
2 . 透明度HSLA
HSLA------与RGBA类似(RGBA指的是在RGB的基础上多了个控制alpha透明度的参数,取值在0到1之间)
HSLA就是在HSL的基础上多了个控制alpha透明度的参数,取值在0到1之间
例如:透明度为0.2的红色背景
background-color: hsla(0,100%, 50%,0.2);
有了这些全新的颜色定义方法,以后我们定义颜色时就可以更灵活了。
.