CSS3 新增颜色表示方式

CSS3 新增颜色表示方式

RGBA模式

HSL模式

HSLA模式

1.RGBA模式

RGBA记法。

此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

语法：RGBA(R,G,B,A)

取值：

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

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

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

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

  例如:rgba(255,0,0,0.5)半透明红色

2.HSL模式

语法:HSL(H,S,L)

取值：

H： Hue(色调)。

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

S： Saturation(饱和度)。取值为：0.0% - 100.0% 

L： Lightness(亮度)。取值为：0.0% - 100.0%

  例如:hsl(0,100%,50%) 红色

3.HSLA模式

HSL记法。 (色轮模式)

语法:HSLA(H,S,L,A)

取值：

H： Hue(色调)。

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

S： Saturation(饱和度)。取值为：0.0% - 100.0% 

L： Lightness(亮度)。取值为：0.0% - 100.0%

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

  例如:hsl(360,50%,50%,0.5) 红色

4. transparent

特殊颜色值,表示透明色。可以直接当做颜色使用。

例如：color:transparent 

 设定字体颜色为透明

实例:镂空字

5.Opacity属性

作用：设定元素的透明度。

取值：0~1之间

注意：对于尚不支持opacity属性的IE浏览器

滤镜：filter:alpha(opacity=50) 仅限IE