颜色以及透明度

新的 CSS3 颜色格式和透明度

RGB

RGB(红绿蓝)

color: rgb(254, 2, 8);

HSL

HSL颜色(色相、饱和度、亮度) HSL模式基于一个360度的色相环，60度时为黄色，120度时为绿色，180度时为青色，240度时为蓝色，300度时为洋红色，360度时为红色。

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

版本9以下的IE浏览器不支持RGB和HSL。因此，如果需要针对这些浏览器提供备用的颜色声明,则要将其放在RGB或HSL值之前。

HSL 和 RGB与十六进制颜色值最大的区别，是它们支持透明通道。这意味着可以让元素透明，使其下方的元素可见。

background-color: rgba(255, 255, 255, .8);

background-color: hsla(360, 50%, 50%, .5);

与 opacity 的区别

为什么不使用 opacity 这种透明度与 RGBA 与 HSLA 有所不同，这种方式设置的透明度会对整个元素产生影响(元素的内容都会透明)。 反之，使用 HSLA 或 RGBA 则可以仅让元素的某些部分有透明效果。这样，一个元素可以带有 HSLA 透明背景，但内部文字仍然不透明。