CSS3颜色

CSS3 颜色

CSS支持的颜色名称，十六进制和RGB颜色。

此外，CSS3也还增加了如下几种：

RGBA 颜色 HSL 颜色 HSLA 颜色 opacity

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

属性
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacity 4.0 9.0 2.0 3.1 10.1

RGBA 颜色

RGBA 颜色值是RGB颜色的一个扩展，添加了alpha通道 - 为颜色指定透明度.

一个RGBA颜色值使用: rgba(red, green, blue, 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(hue, saturation, lightness)指定.

  1. Hue（色相）是一个颜色深度(从 0 到 360):
    • 0 (或者360) 是红色
    • 120 是绿色
    • 240 蓝色
  2. Saturation（饱和度） 是一个百分比: 100% 满颜色.
  3. Lightness（明亮度） 也是一个百分比; 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%);}  /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}  /* 浅绿 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿 */
#p4 {background-color: hsl(120, 60%, 70%);}   /* 淡绿 */

让我试试

HSLA 颜色

HSLA 颜色值是HSL颜色的扩展，增加了一个 alpha 通道 - 指定透明度.

HSLA 颜色使用: hsla(hue, saturation, lightness, 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);}  /* 透明绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* 透明浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* 透明深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* 透明淡绿色 */

让我试试

Opacity（透明度）

CSS3 opacity属性设置整个元素的透明度（背景色和文本的透明度）。

opacity 属性值必须在 0.0 (完全透明) 到 1.0 (完全不透明)之间.

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

请注意上面的文字也是透明或者不透明的！

下面的示例显示带有不同透明度的几种元素：

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 透明红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 透明绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 透明蓝色 */

让我试试