CSS3 颜色

CSS 支持 140 多种颜色名称，以及十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。

RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 RGBA 颜色：

HSL 颜色

HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。

HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。

1. 色相是色轮上的度数（从 0 到 360）：
   • 0（或 360）是红色
   • 120 是绿色
   • 240 是蓝色
2. 饱和度是一个百分比值：100％ 是全色。
3. 亮度也是一个百分比值：0％ 是深色（黑色），而 100％ 是白色。

下面的例子定义了不同的 HSL 颜色：

HSLA 颜色

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

HSLA 颜色值由以下参数规定：hsla(hue, saturation, lightness, alpha)，其中 alpha 参数定义不透明度。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

下面的例子定义了不同的 HSLA 颜色：

不透明度

CSS opacity 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

opacity 属性值必须是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：