CSS3颜色
CSS支持的颜色名称，十六进制和RGB颜色。
此外，CSS3还介绍：
- RGBA颜色
- HSL颜色
- HSLA颜色
- 不透明
浏览器支持
在表中的数字规定，完全支持CSS3颜色值/属性中的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| 不透明 | 4 | 9 | 2.0 | 3.1 | 10.1 |
RGBA颜色
RGBA颜色值是RGB颜色值的扩展，带有alpha通道-它规定了颜色的不透明度。
RGBA（红，绿，蓝，：一个RGBA颜色值与指定alpha ）。 的alpha参数是在0.0（完全透明）和1.0（完全不透明）的一个数字。
RGBA（255，0，0，0.2）;
RGBA（255，0，0，0.4）;
RGBA（255，0，0，0.6）;
RGBA（255，0，0，0.8）;
下面的例子定义了不同颜色的RGBA：
例
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
试一试» HSL颜色
HSL代表色相，饱和度和亮度。
HSL（色相，饱和度，明度）：一个HSL颜色值与指定。
- 色调是色轮（从0到360）学位：
- 0（或360）是红色
- 120是绿色的
- 240是蓝色的
- 饱和度是一个百分比值：100％是全彩。
- 明度也是百分比; 0％是深（黑色）和100％是白色。
HSL（0，100％，30％）;
HSL（0，100％，50％）;
HSL（0，100％，70％）;
HSL（0，100％，90％）;
下面的例子定义了不同颜色的HSL：
例
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
试一试» HSLA颜色
HSLA颜色值是HSL颜色值的扩展，带有alpha通道-它规定了颜色的不透明度。
HSLA（色调，饱和度，明度，：一个HSLA颜色值与指定alpha ），其中，所述alpha参数定义的不透明度。 的alpha参数是在0.0（完全透明）和1.0（完全不透明）的一个数字。
HSLA（0，100％，30％，0.3）;
HSLA（0，100％，50％，0.3）;
HSLA（0，100％，70％，0.3）;
HSLA（0，100％，90％，0.3）;
下面的例子定义不同的颜色HSLA：
例
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
试一试» 不透明度
CSS3的不透明度属性设置为指定的RGB值的不透明性。
Opacity属性值必须在0.0（完全透明）和1.0（完全不透明）的数字。
RGB（255，0，0）;不透明度：0.2;
RGB（255，0，0）;不透明度：0.4;
RGB（255，0，0）;不透明度：0.6;
RGB（255，0，0）;不透明度：0.8;
注意，上面的文字也将是不透明的。
下面的例子显示了透明度不同的RGB值：
例
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
试一试»