CSS3 颜色(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);
}
测试看看‹/›