CSS3 颜色

CSS3 提供了几种定义颜色值的新方法。

在 CSS3 中定义颜色

在上一节中，您学习了如何使用 颜色关键字和 RGB 符号 定义颜色。 除此之外，CSS3 添加了一些新的功能符号，用于为 rgba(), hsl() 和 hsla() 元素设置颜色值。

在下一节中，我们将一一讨论这些颜色模型。

RGBA 颜色值

可以使用 rgba() 函数符号在 RGBA 模型（红-绿-蓝-alpha）中定义颜色。 RGBA 颜色模型是具有 Alpha 通道的 RGB 颜色模型的扩展 — 它指定颜色的不透明度。

alpha 参数接受从 0.0（完全透明）到 1.0（完全不透明）的值。

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}

HSL 颜色值

颜色也可以使用 hsl() 函数符号定义 HSL 模型（色调-饱和度-亮度）。 色调表示为色轮或圆圈（即以圆圈表示的彩虹）的角度（从 0 到 360）。这个角度以少单位的形式给出，因为角度通常以度为单位测量，单位是隐含在 CSS 中的。

饱和度和亮度以百分比表示。 100% 饱和度表示全彩，0% 表示灰色阴影。而100%亮度为白色，0%亮度为黑色，50%亮度正常。 看看下面的例子：

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

HSLA 颜色值

可以使用 hsla() 函数符号在 HSLA 模型（hue-saturation-lightness-alpha）中定义颜色。 HSLA 颜色模型是具有 Alpha 通道的 HSL 颜色模型的扩展 — 它指定颜色的不透明度。

alpha 参数接受从 0.0（完全透明）到 1.0（完全不透明）的值。

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}