HSL颜色笔录

2018-02-09 12:40:15来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

今天看到一个新的定义颜色属性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);

 

 

 

有了这些全新的颜色定义方法,以后我们定义颜色时就可以更灵活了。

 

 

 

.

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台