<length> || <percentage> || <percentage> || <opacity>
css 使用HSLA 设置颜色【CSS3.0参考手册】
语法:
取值:
- <length> :
- Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
- <percentage> :
- Saturation(饱和度)。 取值为0%到100%之间的值;
- <percentage> :
- Lightness(亮度)。 取值为0%到100%之间的值;
- <opacity> :
- alpha(透明度)。 取值在0到1之间;
说明:
HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。
兼容性:
类型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
版本 | (×)IE6 | (√)Firefox 3.0 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
(×)IE7 | (√)Firefox 3.5 | ||||
(×)IE8 | |||||
示例:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css 使用HSLA 设置颜色</title> </head> <body> <div style="background-color: hsla(0,100%,50%,0.2);color:white;height:50px;line-height:50px;">在Firefox的浏览器里能看到蓝色背景</div> </body> </html>
来源://作者:/更新时间:2014-01-14
顶
踩
相关文章:
- word-wrap 控制文本内容换行【CSS3.0参考手册】
- css 设置背景色或图片半透明的方法(图文)
- css 设置背景色透明的方法(图文)
- 高端大气简约的表格式样实例_蓝色紫色table css 样式_
- html颜色代码表大全_HTML背景颜色代码_html字体颜色表
- resize 调节元素尺寸大小【CSS3.0参考手册】
- text-overflow 文本溢出显示省略标记【CSS3.0参考手册
- text-shadow 文字阴影及模糊效果【CSS3.0参考手册】
- Multiple backgrounds 多重背景图象【CSS3.0参考手册
- background-size 设置背景图片的大小【CSS3.0参考手