css3系列-color

在CSS3的 color 模块中,不仅仅对CSS1和CSS2中部分的概念进行了阐释,也增加了一些颜色相关的特性。

CSS3 Color中增加的特性

‘opacity’属性

CSS3中新增的opacity, 即对元素透明度的控制。它的值的范围[0.0, 1.0]。opacity对我们的直观感觉是只会影响到元素的显示特性,其实不然,它对元素
的层叠上下文也会有影响。
opacity值小于1的元素在规范中叫做一个单独脱离屏幕的图像(a single offscreen image)。
浏览器会为opacity小于1的元素创建一个层叠上下文,即对于一个非定位元素(position为static)
的opacity小于1的元素它相当于是一个’z-index:0’和’opacity:1’的定位元素。

关于层叠上下文的示例:

See the Pen KIicu by shawnxiao (@f2ecouple) on CodePen.

‘RGBA’颜色值

CSS3对RGB颜色模型进行了扩充,包含了’alpha’,以此来需要颜色的透明度。
注意:
1, 不像RGB颜色模型,RGBA中没有16进制的表示方法。
2, 当浏览器不支持RGBA时,会被当做无用值,而不只是alpha不起作用

‘opacity’ 和 ‘RGBA’的区别

‘opacity’是让应用于整个元素的透明度,子元素的透明度的计算以父元素的透明度为基准。
下面第一个例子中,父元素的opacity为:0.4, 子元素的为: 0.8, 由于子元素是在父元素的基准上进行计算,所以子元素实际的opacity为:0.32

‘background:rgba(255, 233,232, 0.5)’则只是应用于背景,而其文字和背景都不受任何影响。

See the Pen aHgAj by shawnxiao (@f2ecouple) on CodePen.

HSL颜色值

hsl颜色值的解析详见wikipedia, 暂时不能理解为什么会有这个,以及这个的坑…