CSS3在线中文参考指南 - HSLA colors » 张鑫旭-鑫空间-鑫生活

CSS3 HSLA colors使用参考指南

浏览：30437次

语法：

<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_colors{
    width:200px; 
    padding:30px 20px; 
    border:2px solid #cccccc; 
    background:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg) no-repeat center top;  
    color:white;
}
.hsla_colors .in{
    background-color:hsla(0,100%,50%,0.4);
}

HTML代码：

<div class="hsla_colors">
    <div class="in">看看这里的背景颜色是什么颜色？</div>
</div>

效果截图

查看demo原页面>>

拓展知识点（由各前端同仁提供）

尚未添加拓展知识点！我来添加++

图片地址是：取消

插入：

我要分享

分享到：1