CSS 颜色
CSS 支持 140 多种颜色名称、HEX 值、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)。
- Hue 是色轮上的一个角度（从 0 到 360）
- 0 (或 360) 是红色
- 120 是绿色
- 240 是蓝色
- Saturation 是一个百分比值：100% 是完全的颜色。
- 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);} /* 带透明度的淡绿色 */
自己动手试一试 »
不透明度
CSS opacity 属性设置整个元素的透明度（背景颜色和文本都将是半透明/透明的）。
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
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;} /* 带透明度的蓝色 */
自己动手试一试 »
