首页 > WEB开发 > CSS

css 使用HSLA 设置颜色【CSS3.0参考手册】

 

语法:

<length> || <percentage> || <percentage> || <opacity>

 

取值:

<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        
         

示例:

css 使用HSLA 设置颜色【CSS3.0参考手册】

代码:

<!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
相关文章
评论:
验证码:
匿名评论: