css背景（background）的特性及其使用技巧

在CSS中，背景（background）属性用于设置元素的背景颜色、背景图片、背景平铺、背景位置、背景大小和背景固定。通过这些属性，我们可以设计出各种各样的背景效果，使网页更具有视觉吸引力。

1. 背景颜色（background-color）

背景颜色（background-color）属性用于设置元素的背景颜色。我们可以使用颜色名称、十六进制颜色值或RGB颜色值来指定背景颜色。例如：

body {
  background-color: #f0f8ff;
}

这段代码将把页面的背景颜色设置为淡蓝色。

2. 背景图片（background-image）

背景图片（background-image）属性用于设置元素的背景图片。我们可以使用URL来指定背景图片的地址。例如：

body {
  background-image: url("images/background.jpg");
}

这段代码将把页面的背景图片设置为“background.jpg”。

3. 背景平铺（background-repeat）

背景平铺（background-repeat）属性用于设置背景图片的平铺方式。我们可以使用以下值来指定背景图片的平铺方式：

• repeat：背景图片在纵向和横向上平铺（默认的）
• no-repeat：背景图片不平铺
• repeat-x：背景图片在横向上平铺，纵向上不平铺
• repeat-y：背景图片在纵向上平铺，横向上不平铺

例如：

body {
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
}

这段代码将把页面的背景图片设置为“background.jpg”，并且不平铺。

4. 背景位置（background-position）

背景位置（background-position）属性用于设置背景图片的位置。我们可以使用以下值来指定背景图片的位置：

• center：背景图片位于元素的中心
• top：背景图片位于元素的顶部
• right：背景图片位于元素的右侧
• bottom：背景图片位于元素的底部
• left：背景图片位于元素的左侧

例如：

body {
  background-image: url("images/background.jpg");
  background-position: center;
}

这段代码将把页面的背景图片设置为“background.jpg”，并且将背景图片置于元素的中心。

5. 背景大小（background-size）

背景大小（background-size）属性用于设置背景图片的大小。我们可以使用以下值来指定背景图片的大小：

• auto：背景图片的大小自动适应元素的大小（默认的）
• contain：背景图片的大小适应元素的大小，但不裁剪背景图片
• cover：背景图片的大小覆盖元素的大小，并裁剪背景图片
• ：指定背景图片的宽度和高度，例如：“100px 200px”

例如：

body {
  background-image: url("images/background.jpg");
  background-size: cover;
}

这段代码将把页面的背景图片设置为“background.jpg”，并且将背景图片的大小设置为覆盖元素的大小。

6. 背景固定（background-attachment）

背景固定（background-attachment）属性用于设置背景图片是否固定。我们可以使用以下值来指定背景图片是否固定：

• scroll：背景图片随元素一起滚动（默认的）
• fixed：背景图片不随元素一起滚动

例如：

body {
  background-image: url("images/background.jpg");
  background-attachment: fixed;
}

这段代码将把页面的背景图片设置为“background.jpg”，并且将背景图片设置为不随元素一起滚动。