background是 css 复合属性，可同时设置背景颜色、图片、位置等。基本语法为 background: [color] [image] [position] [size] [repeat] [attachment] [origin] [clip]；常用属性包括 background-color、background-image 等。示例：纯色背景用 background: #f0f0f0；背景图居中不重复用 background: url(‘image.jpg’) no-repeat center center；全屏固定背景用 background: url(‘hero.jpg’) no-repeat center center / cover fixed。斜杠后为 background-size，需置于 position 后。支持多重背景，用逗号分隔，如 background: url(‘top.png’) repeat-x top, url(‘bottom.jpg’) no-repeat center bottom / cover, #e0e0e0，图层顺序从上到下。注意事项：建议单独设置部分属性以避免覆盖默认值；用 background: none 清除背景；移动端注意图片性能；推荐 cover 和 center 实现响应式背景；透明背景使用 transparent。掌握复合写法提升样式效率。
在 CSS 中，background 是一个复合属性，可以用来同时设置元素的背景颜色、背景图片、背景位置、背景平铺方式、背景滚动行为和背景大小等多个特性。合理使用 background 可以让页面视觉效果更丰富。
1. background 的基本语法
你可以用一行代码设置多个背景相关属性：
background: [color] [image] [position] [size] [repeat] [attachment] [origin] [clip];
这些值可以按顺序写在一起，省略的部分会使用默认值。常用属性说明如下：
- background-color：背景颜色，如 red、#fff、rgba(0,0,0,0.5)
- background-image：背景图片，如 url(‘bg.jpg’)
- background-position：图片起始位置，如 center、top left、50% 50%
- background-size：图片尺寸，如 cover、contain、100px 200px
- background-repeat：是否重复，如 repeat、no-repeat、repeat-x
- background-attachment：滚动行为，如 scroll（随内容滚动）、fixed（固定背景）
2. 常见使用示例
下面是几个典型用法：
立即学习 “ 前端免费学习笔记（深入）”；
/* 纯色背景 */
background: #f0f0f0;
/* 背景图不重复，居中显示 */
background: url(‘image.jpg’) no-repeat center center;
/* 背景图覆盖整个容器，固定不滚动 */
background: url(‘hero.jpg’) no-repeat center center / cover fixed;
注意：/ 后面的值通常代表 background-size，必须放在 background-position 之后，并用斜杠分隔。
3. 多重背景图
CSS 支持为一个元素设置多个背景图，用逗号分隔：
background:
url(‘top-pattern.png’) repeat-x top,
url(‘bottom-texture.jpg’) no-repeat center bottom / cover,
#e0e0e0;
渲染时，前面的图层在上，后面的在下，类似 photoshop 图层 堆叠。
4. 实用技巧与注意事项
使用 background 属性时，有几个关键点要注意：
- 如果只设置部分属性，建议单独写，避免覆盖其他默认值
- 使用 background: none; 可清除所有背景
- 移动端注意背景图大小，避免加载过慢
- 推荐使用 background-size: cover; 配合 background-position: center; 实现响应式全屏背景
- 透明背景可用 background-color: transparent;
基本上就这些。掌握 background 的组合写法，能让你更高效地控制网页视觉表现。
