颜色(Color)

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

在CSS3中定义颜色

在上一节中，您学习了如何使用color关键字和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%);
}

提示：通过定义 red=0=360，其他颜色分布在圆周围，因此green=120，blue=240，依此类推。作为一个角度，它隐式环绕，使得-120=240，480=120,以此类推。

HSLA颜色值

可以使用hsla()功能符号在HSLA模型（色调饱和度-亮度-alpha）中定义颜色。HSLA颜色模型是具有Alpha通道的HSL颜色模型的扩展，该Alpha通道指定了颜色的不透明度。

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

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