上一章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);
}
推荐阅读
- css3背景background – CSS3高级教程
- css3边界border – CSS3高级教程
- 验证css代码 – CSS高级教程
- css属性选择器 – CSS高级教程
- css透明度opacity – CSS高级教程
- css精灵sprite – CSS高级教程
- css媒体类型 – CSS高级教程
- css伪元素用法 – CSS高级教程
- css伪类和伪类选择器 – CSS高级教程