css3 HSLA 颜色制造半透明效果

简介

HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。HSLA是在HSL的基础上增加一个透明度(A)的设置。

半透明效果示例

.wrap {
    background-color: black;
}
.wrap .content {
    border: 10px solid hsla(0, 0%, 100%, .5);
    background-color: yellowgreen;
    background-clip: padding-box;
}

若改css .wrap { background-color: blue; }

语法

hsla(length || percentage || percentage || opacity)

取值

length：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

percentage：Saturation(饱和度)。取值为：0.0% - 100.0%。饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。饱和度为0％表示灰色。

percentage：Lightness(亮度)。取值为：0.0% - 100.0%。亮度0%就为黑，亮度最大100%则为白

opacity：Alpha透明度。取值0~1之间。

兼容性

IE6～8 不支持，其他的浏览器 ok

结语

摘自 《CSS Secrets》一书