语法:
<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 | |||||
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HSLA colors</title>
</head>
<body style="background-color:#ffffff;">
<div style="background-color: hsla(0,100%,50%,0.2);color: hsla(0,0%,0%,.8);">在Firefox的浏览器里能看到透明色背景</div>
</body>
</html>
可以调整背景色透明度,亦可调整字体透明度。