CSS3 颜色

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

在 CSS3 中定义颜色

在上几节中,你已经学习了如何使用颜色关键字和 RGB 符号 定义颜色。除此之外 CSS3 增加了对作为元件设置颜色值的一些新的功能的符号 rgba()hsl()hsla()

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

RGBA 颜色值

可以使用 rgba() 功能符号在 RGBA 模型(红 - 绿 - 蓝 - 阿尔法)中定义颜色。RGBA 颜色模型是 RGB 颜色模型的扩展,带有 alpha 通道 - 指定颜色的不透明度。

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 模型(色调饱和度 - 亮度) 。色调表示为色轮或圆的角度(从 0360)(即以圆圈表示的彩虹)。该角度以较小的单位给出,因为角度通常以度为单位来度量,单位隐含在 CSS 中。

饱和度和亮度表示为百分比。 100% 饱和度意味着全彩色, 0% 是一种灰色阴影。然而, 100% 亮度是白色, 0% 亮度是黑色, 50% 亮度是正常的。看看下面的例子:

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

提示: 通过定义 red=0=360 ,而其他颜色都绕了一圈扩散,所以 green=120blue=240 等等。作为一个角度,它隐形地包括了 -120=240480=120 等。

HSLA 颜色值

可以使用 hsla() 功能符号在 HSLA 模型(色调饱和度 - 亮度-α)中定义颜色。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);
}