本文共 1440 字，大约阅读时间需要 4 分钟。

CSS 背景属性参考文档

CSS背景属性是CSS中非常重要的一个属性，主要用于控制元素的背景样式。以下是CSS背景属性的详细说明。

1. 简写属性

background 是CSS的简写属性，它允许在单一的CSS声明中同时设置多个背景属性。常见的使用方式如下：

• background-color：设置元素的背景颜色。
• background-image：设置元素的背景图像。
• background-position：设置背景图像的起始位置。
• background-repeat：设置背景图像的重复方式。
• background-attachment：设置背景图像的固定方式。

示例：

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

2. 滚动属性

background-attachment 属性用于控制背景图像是否随页面内容滚动。

• scroll：默认值，背景图像随页面内容滚动。
• fixed：背景图像固定不滚动。
• inherit：继承父元素的背景-attachment属性。

示例：

body {
  background-attachment: scroll;
}

3. 背景颜色

background-color 属性用于设置元素的背景颜色。默认值为透明（transparent），如果没有设置背景颜色，背景颜色会继承父元素的背景颜色。

示例：

body {
  background-color: #b0c4de;
}

4. 背景图像

background-image 属性用于设置元素的背景图像。可以通过URL指定图像路径，或者使用相对路径。如果没有设置背景图像，元素的背景会显示为透明。

示例：

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

5. 背景图像位置

background-position 属性用于设置背景图像的起始位置。可以通过指定水平和垂直位置（如left top、center center等）来确定图像的显示位置。

默认值为0% 0%，即图像左上角显示。如果只指定一个位置值，另一个值会默认为50%。

示例：

body {
  background-position: left top;
}

6. 背景图像重复

background-repeat 属性用于控制背景图像的重复方式。

• repeat：默认值，背景图像会在垂直和水平方向重复。
• repeat-x：仅水平方向重复。
• repeat-y：仅垂直方向重复。
• no-repeat：背景图像不会重复。
• inherit：继承父元素的背景-repeat属性。

示例：

body {
  background-repeat: repeat;
}

如果需要设置图像重复的具体方式，可以结合使用background-position属性。例如：

body {
  background-image: url('tree.png');
  background-position: repeat-x;
}

注意事项

• 如果没有设置background属性，元素的背景会显示为透明。
• 如果需要自定义背景图像的滚动方式，可以使用background-attachment: fixed。
• 如果需要优化页面性能，可以避免使用过大的背景图像，或者使用更轻量的图像格式（如WebP）。