CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性

CSS2中色彩模式只有RGB色彩模式(RGB即RED、Green、BLue)和十六进制模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED、Green、BLue、Alpha)。

但是不管是RGB模式还是十六进制模式都无法主观感受,所以CSS3又加入HSL颜色模式。当然HSL模式也增加opacity的Alpha值:HSLA模式(HSL模式与HSLA模式的关系跟RGB与RGBA关系一样)。接下来我们介绍 RGBA、HSL以及HSLA这几种新的色彩模式,顺便介绍下Opacity透明属性的区别。

HSL模式

  • RGB色彩模式:可以理解为大自然的颜色都是由红、绿、蓝三种光学颜色混合而成的。所以我们可以用RGB色彩模式来表示某种颜色。颜色最小是0最大值是255,相应位置上是255表示那种颜色最纯,是0没有那种颜色。譬如rgb(255,0,0)纯红,rgb(0,255,0)纯绿,rgb(0,0,255)纯蓝,rgb(255,255,255)就是黑了。
  • 十六进制颜色(简称HEX):则是使用 # 的符号来表示十六进制,形如#RRGGBB的格式,每两位上的值就是RGB上的数字转换16进制后的值。
  • HSL色彩模式:就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值360,饱和度和亮度有百分比表示0-100%之间。

因为人们看到颜色第一时间会产生“这是什么颜色?深浅如何?明暗如何?”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色,所以HSL色彩模式是人类对颜色最直接的感知。

颜色集中模式知识就了解这么多了,毕竟我们不是艺术家,还是看代码吧:

div{width: 100px; height: 20px;}
.red{background-color: red}
.red_hex{background-color: #ff0000}
.red_rgb{background-color: rgb(255,0,0);}
.red_hsl{background-color: hsl(0,100%,54%);}
.green_hex{ background-color:#00ff00;}
.blue_hex{ background-color: #0000ff;}
RGB十六进制模式、RGB色彩模式、以及HSL色彩模式DEMO

HSL被现代浏览器较好的支持,而且不需要任何前缀,IE6-IE7不支持。

HSLA模式和RGBA模式与Opacity的区别

其实HSLA模式和RGBA模式就是HSL模式和RGB模式增加一个opacity值,opacity 的Alpha值表示不透明度,取值在0到1之间。

div{width: 100px; height: 20px;}
.red_rgb_alpha{background-color: rgba(255,0,0,0.3);}
.red_hsl_alpha{background-color: hsla(0,100%,54%,0.3);}
.red_hsl_opacity{background-color:red; opacity: 0.3}
HSLA模式和RGBA模式与Opacity的区别DEMO

HSLA模式和RGBA模式与Opacity的区别就是前两者不回影响子类的透明度;而Opacity会影响子类的透明度,从而导致子类元素的颜色产生色差,所以为了避免出现这种情况,我们避免在设置Opacity值的div下包含子类(可以用绝对定位加层级解决这个问题)。

HSLA模式和RGBA模式与Opacity在IE6-IE8都不支持,但是我们可以利用滤镜实现透明,如下:

.red_hsl_opacity{
    background-color:red;
    opacity: 0.3;/*除了IE,但是IE9支持*/
    filter:alpha(opacity=30);/*IE都支持,IE6不支持,可以使用Alpha透明图片作为背景*/
}
Opacity透明DEMO

本文源链接:http://www.html5jscss.com/css3-rgba-hsl-hslb-opacity.html

转载请注明《CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性》| html5jscss