CSS background 用法详解

什么是 background？

在 CSS 中，background 是一个复合属性，用于设置元素的背景样式。 它可以控制背景颜色、背景图片、重复方式、位置、尺寸等。

常用子属性

• background-color：设置背景颜色
• background-image：设置背景图片
• background-repeat：设置背景是否及如何重复
• background-position：设置背景图片起始位置
• background-size：设置背景图片尺寸
• background-attachment：设置背景是否随页面滚动

div {
  background: #f0f0f0 url("bg.jpg") no-repeat center/cover fixed;
}

div {
  background-color: #f0f0f0;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

实用技巧

- 使用 background-size: cover 可让图片完全覆盖容器（常用于全屏背景）
- 使用 background-size: contain 可完整显示图片并保持比例
- 多重背景：支持用逗号分隔多个背景图，如：
background: url(a.png) top left, url(b.png) bottom right;