Color and Opacity

在线示例

CSS3之前，样式颜色要么是关键字，要么是十六进制，要么是 rgb()函数。

opacity property

此属性用来设置元素的透明度，值在0.0到1.0之间，默认值是1.0，0.0代表完全透明，1.0代表完全不透明。

E { opacity: number; }

opacity 不仅影响设置了此属性的元素，还影响其子元素。如果元素设置了opacity:0.6，那么子元素也会有同样的透明度，而且子元素的透明度只能再被设置为低与0.6，不能设置为高于0.6，即使设置了也不会有效果。

换句话说，无法设置让一个元素的透明度比其父元素更大，或是说无法让一个元素比其父元素更加不透明，只能是更加透明或是等于其父元素的透明度。

New and Extended Color Values

Alpha channel

颜色函数rgba()，分别是Red, Green, Blue, Alpha。

E { color: rgba(red, green, blue, alpha); }

alpha 的值和opacity属性一样，从0.0到1.0，0.0代表完全透明，1.0代表完全不透明。
rgba() 与 opacity 的区别：

1. rgba() 是个颜色值，所以无法通过他来改变一张图片或是一个有背景图片的元素的透明度。
2. 同opacity 一样，子元素会继承父元素设置的rgba() 值 ，但是子元素可以完全重写其rgba() 值，不像opacity ，子元素只能往小(透明)的方向重写。

所有设置颜色的地方都可以用rgba()：

.shadow .text { box-shadow: 10px 10px 4px rgba(0,0,0,0.7); }
.border .text { border: 10px solid rgba(0,0,0,0.5); }
.text-semi p { color: rgba(0,0,0,0.6); }
.text-shadow p { text-shadow: 5px 5px 1px rgba(0,0,0,0.6); }

Hue, Saturation, Lightness

hsl() color function，HSL即是代表色调，饱和度，亮度三个通道的颜色。

E { color: hsl(hue,saturation,lightness); }

hue 的值为0到360，saturation 和 lightness 的值为0%到100%。

相对rgba()，也有个hsla()，增加了alpha通道。

E { color: hsl(hue,saturation,lightness,alpha); }

Color Variable: currentColor

颜色变量currentColor，代表当前元素的color属性值。

<h2>H2 (<abbr>此元素的任何颜色值若使用与父元素相同的颜色，可以使用currentColor变量</abbr>)</h2>
<h2 class="ccolor">H2 (<abbr>此元素的任何颜色值若使用与父元素相同的颜色，可以使用currentColor变量</abbr>)</h2>

h2 {
    color: black;
    padding: 10px;
    width: -webkit-max-content; 
}
h2.ccolor {
    background-color: black;
    color: yellow;
}
h2 abbr { border-bottom: 6px double currentColor; }

此文是对《The Book of CSS3 2nd edition》第10章的翻译和归纳，方便以后查阅。
感谢其作者Peter Gasston !