CSS 背景

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

本节将带你了解以下 CSS 背景属性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

背景色

在 CSS 中，使用 background-color 属性设置元素的背景颜色。

设置页面的背景颜色：

body {
  background-color: gray;
}

使用 CSS，颜色通常由以下方式设置：

• 有效的颜色名称 - 如 gray
• 一个十六进制值 - 如 #ff0000
• 一个 RGB 值——比如 rgb(255,0,0)

查看 CSS 颜色章节了解更多关于 CSS 颜色的信息。

不透明度

opacity 属性设置元素的不透明度，取值为 0.0（完全透明）和 1.0（完全不透明）的数。

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

!! 注意： 当使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这会使元素内的文本难以阅读。

使用 RGBA 的颜色透明度

在 CSS 颜色章节中了解到，可以使用带有 Alpha 通道的 RGB 颜色值(RGB**A**)设置颜色的不透明度。

RGBA 颜色值表示方法为： rgba(red, green, blue, alpha)。 alpha 参数即是不透明度，取值为 0.0（完全透明）和 1.0（完全不透明）之间的数。

设置背景颜色的不透明度

div {
  background: rgba(0, 128, 0, 0.3); /* 带有 30% 不透明度的绿色 */
}

背景图片

在 CSS 中使用 background-image 属性设置元素的背景图像。

默认情况下，图像是重复的，覆盖了整个元素。

设置页面的背景图像：

body {
  background-image: url("paper.gif");
}

设置 <div> 元素的背景图像：

div {
  background-image: url("paper.gif");
}

CSS 背景图片重复

在 CSS 中，背景图片默认在横向纵向重复排列。这导致有些图像看起来很奇怪。为了让效果更好，使用 background-repeat 设置背景图像合适的重复方式。常用的重复方式有：

• repeat - 横向纵向都重复，此选项为默认选项
• repeat-x - 只横向重复
• repeat-y - 只纵向重复
• no-repeat - 不重复

横向重复的背景图像：

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

背景图片的位置

在 CSS 中，使用 background-position 属性设置背景图像的位置。

将背景图片放在右上角：

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS 背景定位 background-attachment

background-attachment 属性设置背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

主要可选值有：

• fixed - 相对于视口（viewport）固定
• scroll - 相对元素本身固定，不随内容一起滚动
• local - 相对元素的内容固定，随内容一起滚动，

设置应固定在右上角的背景图像：

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

CSS 背景属性简写 background

background 是一个简写属性，用于一次性集中定义各种背景属性，包括 background-color, background-image, background-repeat，background-position 等所有背景属性。

而不是写：

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您可以使用速记属性 background ：

使用速记属性在一个声明中设置背景属性：

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

使用速记属性时，属性值的顺序是：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

缺少一个属性值无关紧要，只要其他属性值按此顺序即可。请注意，我们在上面的示例中没有使用 background-attachment 属性，因为它没有值。

所有 CSS 背景属性