CSS 颜色
CSS 支持 140 多种颜色名称、十六进制值、RGB 值、RGBA 值、HSL 值、HSLA 值和不透明度。
RGBA 颜色
RGBA 颜色值是带有 alpha 通道的 RGB 颜色值的扩展 - 它指定颜色的不透明度。
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);} /* 红色，不透明度 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 绿色，不透明度 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 不透明度蓝色 */
亲自尝试 »
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 {背景颜色：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 颜色值是带有 alpha 通道的 HSL 颜色值的扩展 - 它指定颜色的不透明度。
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);} /* 绿色不透明度 */
#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）；不透明度：0.2；
rgb（255，0，0）；不透明度：0.4；
rgb（255，0，0）；不透明度：0.6；
rgb（255，0，0）；不透明度：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;} /* 不透明度蓝色 */
亲自尝试 »
