css3颜色color – CSS3高级教程

上一章CSS3高级教程请查看:css3边界border
CSS3提供了几种定义颜色值的新方法。
在CSS3中定义颜色在前一节中,你学习了如何使用颜色关键字和RGB表示法定义颜色。此外,CSS3还添加了一些新的函数符号,用于为rgba()、hsl()和hsla()等元素设置颜色值。
在下一节中,我们将逐一讨论这些颜色模型。
RGBA颜色值可以使用RGBA()函数表示法在RGBA模型(红-绿-蓝-alpha)中定义颜色。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(hue-saturation-lightness),使用hsl()函数符号。色调被表示为一个角度(从0到360)的色轮或圆(即彩虹代表围成一圈)。这个角是作为一个单元数量少,因为角是通常以度,单位是隐含在CSS。
饱和度和明度表示为百分数,100%饱和意味着全彩色,0%是一个灰色的阴影。明度而轻100%是白色,0%是黑色,50%的明度是正常的。看看下面的例子:
h1 { color: hsl(360,70%,60%); } p { background-color: hsl(480,50%,80%); }

提示:根据定义,红色=0=360,其他颜色分布在圆形周围,所以绿色=120,蓝色=240,等等。作为一个角度,它隐含地环绕着-120=240、480=120等等。
HSLA颜色值可以使用HSLA()函数表示法在HSLA模型(颜色-饱和度-透明度-alpha)中定义颜色。HSLA颜色模型是HSL颜色模型的扩展,带有alpha通道,用于指定颜色的不透明度。
【css3颜色color – CSS3高级教程】alpha参数接受0.0(完全透明)到1.0(完全不透明)之间的值。
h1 { color: hsla(360,80%,50%,0.5); } p { background-color: hsla(480,60%,30%,0.3); }

    推荐阅读