CSS3 颜色

---

CSS 支持 140 多种颜色名称，以及十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。

---

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);}  /* 不透明的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* 不透明的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* 不透明的蓝色 */ 亲自试一试 »

---

---

HSL 颜色

HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。

HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

1. 色相是色轮上的度数（从 0 到 360）:
   • 0（或 360）是红色
   • 120 是绿色
   • 240 是蓝色
2. 饱和度是一个百分比值:100％ 是全色。
3. 亮度也是一个百分比值: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%);}  /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}  /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}   /* 柔和的绿色 */ 亲自试一试 »

---

HSLA 颜色

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

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);}    /* 带有不透明度的柔和绿色 */ 亲自试一试 »

---

不透明度

CSS 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;}  /* 不透明的蓝色 */ 亲自试一试 »

---

CSS3 习题和测验

测验 1 » 测验 2 » 测验 3 » 测验 4 »