CSS3提供了几种定义颜色值的新方法。
在上一节中,您学习了如何使用color关键字和RGB表示法定义颜色。除此之外CSS3增加了对作为元素设置颜色值的一些新的功能的符号rgba(),hsl()和hsla()。
在以下部分中,我们将逐一讨论这些颜色模型。
可以使用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模型(色相-饱和度-亮度)。色相表示为色轮或圆形(即以圆形表示的彩虹)的角度(从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模型(色调饱和度-亮度-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); }测试看看‹/›