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 代表色调、饱和度和亮度。
HSL 颜色值使用以下语法指定：hsl(hue, saturation, lightness)。
- 色调是色轮上的一个角度（从 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%);} /* 绿色 */
#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 属性设置整个元素的透明度（背景颜色和文本都将透明/不透明）。
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;} /* 绿色，透明度为0.6 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* 蓝色，透明度为0.6 */
自己尝试 »
