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

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

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

提示： 通过定义 red=0=360 ，而其他颜色都绕了一圈扩散，所以 green=120 ， blue=240 等等。作为一个角度，它隐形地包括了 -120=240 ， 480=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);
}