CSS3中颜色表示方法

HSL colors：

语法：

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

取值：

<length> ：

Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：

Saturation(饱和度)。 取值为0%到100%之间的值；

<percentage> ：

Lightness(亮度)。 取值为0%到100%之间的值；

实例：

<div style="background-color: hsl(240,100%,50%);color:white;">在Firefox的浏览器里能看到蓝色背景</div>

HSLA colors：

语法：

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

取值：

<length> ：

Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：

Saturation(饱和度)。 取值为0%到100%之间的值；

<percentage> ：

Lightness(亮度)。 取值为0%到100%之间的值；

<opacity> ：

alpha(透明度)。 取值在0到1之间；

 

实例：

<div style="background-color: hsla(0,100%,50%,0.2);">在Firefox的浏览器里能看到透明色背景</div>

opacity：

语法：

<length> | inherit

取值：

<length> ：

由浮点数字和单位标识符组成的长度值。不可为负值。默认值为：1

inherit：

默认继承。

实例：

<style>

img.opacity1 { opacity:0.25;}

img.opacity2 { opacity:0.50;}

img.opacity3 { opacity:0.75;}

</style>

RGBA colors：

语法：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

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

取值：

length> ：

Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：

Saturation(饱和度)。 取值为0%到100%之间的值；

<percentage> ：

Lightness(亮度)。 取值为0%到100%之间的值；

<opacity> ：

alpha(透明度)。 取值在0到1之间；

 

实例：

<div style="background-color: rgba(0,0,0,0.5);">在Firefox的浏览器里能看到alpha值为0.5的黑色背景</div>