背景简写属性
最后更新：2026-09-13
background 背景简写属性
background 是背景相关属性的简写形式，可以一次性设置背景颜色、图片、位置、大小、重复方式等多个子属性。使用简写属性可以让代码更简洁，同时未指定的属性会使用默认值。它是 CSS 开发中最常用的简写属性之一。
| 分类 | |
|---|---|
| 初始值 | transparent none repeat scroll 0% 0% auto padding-box border-box |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
background: [<bg-color> || <bg-image> || <bg-repeat> || <bg-position> [ / <bg-size> ]? || <bg-attachment> || <bg-clip> || <bg-origin>];⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<bg-layer>*, <final-bg-layer> | 值 | 背景简写属性 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 简写中 background-size 必须跟在 background-position 之后，用 / 分隔，例如 center/cover。
注意： 使用简写属性会重置所有未指定的背景子属性为默认值，可能覆盖之前的单独设置。
❓ 常见问题
Qbackground 简写和单独设置子属性哪个更好？
A简写适合一次性定义完整背景，如 background: #fff url(bg.jpg) no-repeat center/cover; 更简洁；单独设置适合只改某一个子属性（如只调 background-size），不会重置其他值。注意简写会把未书写的子属性重置为默认值，"先简写再单独设置"容易踩坑。
Qbackground 简写的属性顺序有要求吗？
A顺序相对灵活，浏览器按值类型自动识别，但有两点硬性要求：background-size 必须紧跟 position 后用 / 分隔（如 center/cover）；background-color 只能放最后。推荐顺序：color → image → repeat → position/size。
Q如何用 background 简写实现背景图铺满？
A一行搞定：background: #333 url(photo.jpg) no-repeat center/cover;。它等价于依次设置背景色、背景图、不重复、水平垂直居中、cover 铺满容器且保持图片比例。这是横幅、卡片背景最常用的写法，简洁且不易遗漏。
Qbackground 简写会重置哪些属性？
A除显式写出的子属性外，其余背景属性都重置为初始值：image 为 none、repeat 为 repeat、position 为 0% 0%、size 为 auto、attachment 为 scroll、clip 为 border-box、origin 为 padding-box。故勿先简写再单独设置背景子属性。
🏷️ 相关属性
💡 相关案例
📚 相关教程
