CSS 背景

CSS 背景属性用于为元素添加背景效果。

在这些章节中，您将了解以下 CSS 背景属性：

CSS 背景颜色

这个background-color属性指定元素的背景颜色。

页面的背景颜色设置如下：

body {
background-color: lightblue;
}

对于 CSS，颜色通常由以下方式指定：

看着CSS 颜色值获取可能颜色值的完整列表。

您可以设置任何 HTML 元素的背景颜色：

这里，<h1>、<p> 和 <div> 元素将具有不同的背景颜色：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

这个opacity属性指定元素的不透明度/透明度。它可以取 0.0 - 1.0 之间的值。值越低，越透明：

不透明度 1

不透明度0.6

不透明度0.3

不透明度0.1

div {
background-color: green;
opacity: 0.3;
}

笔记：当使用opacity属性为元素的背景添加透明度，其所有子元素都继承相同的透明度。这可能会使完全透明元素内的文本难以阅读。

如果您不想对子元素应用不透明度（如上面的示例所示），请使用RGBA颜色值。以下示例设置背景颜色而不是文本的不透明度：

100% 不透明度

60% 不透明度

30% 不透明度

10% 不透明度

你从我们那里学到了CSS 颜色章节，您可以使用 RGB 作为颜色值。除了 RGB 之外，您还可以使用 RGB 颜色值α通道（RGBA) - 指定颜色的不透明度。

RGBA 颜色值指定为： rgba(red, green, blue,α）。这α参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您将在我们的文章中了解有关 RGBA 颜色的更多信息CSS 颜色章节。

div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Property	Description
background-color	Sets the background color of an element