❮ 上一节
下一节 ❯
CSS 背景颜色
更新于 2024/5/20 10:59:00
CSS background-color
background-color 属性指定元素的背景色。
实例
页面的背景色设置如下:
body { background-color: lightblue;}
亲自试一试 »
通过 CSS，颜色通常由以下方式指定:
有效的颜色名称 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"
请查看 CSS 颜色值，获取可能颜色值的完整列表。
其他元素
您可以为任何 HTML 元素设置背景颜色:
实例
在这里，
、
和
h1 { background-color: green;}
div { background-color: lightblue;}p { background-color:
yellow;}
亲自试一试 »
不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
实例
div { background-color: green; opacity: 0.3;}
亲自试一试 »
注释: 使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度:
100% opacity
60% opacity
30% opacity
10% opacity
您从我们的CSS 颜色 章节中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道一起使用（RGBA） - 该通道指定颜色的不透明度。
RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
提示: 您可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。
实例
div { background: rgba(0, 128, 0, 0.3) /* 不透明度为 30% 的绿色背景 */}
亲自试一试 »
❮ 上一节
下一节 ❯