做前端这些年，被background简写坑过的次数真不少。明明只想给元素加个背景图，结果背景色突然消失；在多背景层里加一层渐变，发现原来的图片被重置成默认repeat，一查才发现简写会把没写到的属性全部重置。CSS 设置背景拆开来看一共有 8 个子属性，但我实际写代码时更习惯按 7 组来记——因为background-origin和background-clip在简写里经常会联动，放到一起理解反而更清楚。这篇就把背景的 7 组属性逐个拆一遍，再把background简写的注意点集中讲透，包括顺序、覆盖规则、position与size的写法、origin和clip的互相影响等，适合刚入门的前端、想系统回顾背景用法的同学，以及面试前想把这些细节一次理清的朋友。
1. 七组属性逐个拆解
1.1 background-color 背景色基础
背景色的部分看起来最简单，就是给元素填一个颜色，但有几个细节值得注意。
background-color默认值是transparent，这一点大家都清楚。容易忽略的是它的绘制范围：颜色会铺满整个背景区域，包括边框底下。如果你给元素设置了border-radius，背景色会跟着圆角一起被裁剪，不会出现颜色溢出圆角外的情况。所以半透明色值rgba(0, 0, 0, 0.4)常用来做遮罩层时，能直接贴着圆角元素的轮廓走，效果很自然。
另一个容易踩的是背景色和背景图的关系。两者不是互斥的，背景图永远压在背景色上面。当你用了一张带透明通道的 PNG 图片时，透明区域会露出下层的背景色。这个特性经常被拿来用：先铺一个深色背景色，再把半透明纹理图叠上去，既省了背景图报错的兜底问题，又避免了图片体积过大。例如：
.card { background-color: #1a1a2e; background-image: url("pattern.png"); }这样即使pattern.png加载失败，深色底色还在，页面不会显得很突兀。建议把背景色当作兜底设计来写，尤其是团队协作的项目里，别人用你的组件时不一定有这张图。
1.2 background-image 背景图与多背景
background-image不只是放一张图片那么简单，它支持多背景，也支持渐变。先看多背景的语法：
.hero { background-image: url("top.png"), url("middle.png"), url("bottom.png"); }三张图片用逗号分隔，先写的会显示在上层，最后写的在最底层。这一点非常重要——写多背景之前最好先想好视觉层级，不然图层顺序反了，出来的画面和你预期完全相反。我见过有人在项目里为了“让遮罩盖在图上”，把半透明遮罩写在了第二层，结果遮罩跑到图片下面去了，折腾了半小时。
background-image也支持渐变写法，最常见的线性渐变：
.btn { background-image: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%); }这里有个很多人不知道的知识点：渐变在 CSS 里不算color，而是一张“生成的图片”，它属于background-image的范畴。所以后面所有控制背景图的行为——repeat、position、size、origin——同样作用于渐变。
多背景配合渐变有小技巧：把渐变色和真实图片放在同一组图层里，可以实现“渐变遮罩 + 底图”的效果，但要注意遮罩必须写在图片前面。
1.3 background-repeat 平铺行为
background-image的默认值不是no-repeat，而是repeat。这是最容易“翻车”的默认行为之一。很多人只写background: url(xxx.png)，期待图片只出现一张，结果图片像瓷砖一样铺满了整个元素，当然，如果是无缝纹理图，这反而是我们想要的效果。
repeat可以组合成repeat-x、repeat-y，分别只沿水平或垂直方向平铺，另一个方向默认不重复。实际项目里做顶部渐变条纹或者竖向分割线时，这两个值非常好用。
再往深说一点，CSS3 还提供了两个较少人用的值：space和round。
space：在保持图片尺寸不变的前提下，尽可能多复制几张图，并让它们之间的间距相等。如果容器放不下第二张，就直接不再平铺。这种模式不会裁剪图片，适合做相册墙、重复图标这类需要整齐排列的场景。round：会计算容器宽度能容纳几张整数倍的图片，然后对图片做缩放，让整体完全填满容器，不留空隙。适合做那种需要背景图连续覆盖整个区域并且不能有断口的场景。
这两个值的兼容性在现代浏览器里都支持，但如果是给老移动端做页面，还是保守一点，主力用repeat/no-repeat/repeat-x/repeat-y就好。我做一个带纹理的横栏背景时，最喜欢用round，因为不管容器多宽，纹理都能连续铺满，不会在边缘露白。
1.4 background-position 定位规则
background-position默认值是0% 0%，也就是背景图左上角贴着元素的左上角。它支持几类写法：
- 关键字：
top、right、bottom、left、center - 长度：
20px、30% - 混合写法：
right 20px bottom 10px
先说关键字组合。background-position: center在只写一个值时，另一个方向自动是center，也就是水平垂直双居中；background-position: right等价于right center。这是一个隐含的默认值规则，记住它省很多事。
带百分比时有一个公式特别容易被想当然：(容器尺寸 - 背景图尺寸) * 百分比。举例，容器宽度 600px，图片宽度 200px，设置background-position: 50% 0，实际水平偏移是(600 - 200) * 50% = 200px，而不是600 * 50% = 300px。如果图片比容器大，百分比算出来的偏移是负值，图片会向左或向上超出容器，很容易把图移出可视区域。所以如果你想让一张大于容器的图片“居中显示”，直接写center center更符合直觉。
还有一套很实用的边距写法：background-position: right 20px bottom 10px，意思是图片的右边缘距离容器右边缘 20px，下边缘距离底部 10px。这种写法在做弹窗图标、角标定位时特别省心，不然你每次都要手算“容器宽度减图片宽度再减去偏移量”的像素值。
补充一个冷知识：当背景图尺寸和容器尺寸完全一样时，无论怎么设置background-position，视觉上都看不出区别。如果你测试了半天发现位置没变化，先检查background-size是不是把图片拉伸成和容器一样大了。
1.5 background-size 尺寸控制
background-size默认值是auto，也就是使用图片原始尺寸。这个属性可以设置长度、百分比、cover和contain。
百分比是相对于容器的尺寸计算的。假如容器是 300px × 200px，background-size: 50% 50%会将图片缩放为 150px × 100px。如果只传一个值，第二个值为auto，图片宽度按第一个值缩放，高度按原图比例等比缩放。
cover和contain的选择是高频场景：
cover：图片等比缩放，直到完全覆盖容器，不留空隙。图片超出容器的部分会被裁剪，适合做全屏横幅。contain：图片等比缩放，直到完整显示在容器内，可能出现留白。适合展示产品图、Logo，用户在意的往往是“完整可见”而不是填满。
实际选哪个取决于视觉目标：要铺满，用cover；要完整，用contain。但要注意，cover会裁掉图片的一部分，如果图片中心是核心内容，而两端是装饰，可能裁不中。可以配合background-position: center裁剪中间区域。
还有一个很容易错的地方：多背景时，每一层的background-size要跟随对应层的background-position，写在/后面。顺序错了，浏览器会解析失败或结果不一致。比如：
.box { background: url("icon-small.png") left top / 40px 40px no-repeat, url("bg.jpg") center / cover no-repeat; }这里的left top / 40px 40px表示第一张图定位在左上角，尺寸 40px 见方；center / cover表示第二张图定位居中，尺寸为 cover。位置和尺寸必须用/连在一起，位置在左，尺寸在右。
对移动端适配，background-size最好用cover配合压缩过的图片，不要直接甩一张原始大图上去，两三兆的图片在移动设备上光解码就卡顿。
1.6 background-origin 与 background-clip 的联动
这两兄弟最容易搞混，我把它们放一组讲。
background-origin决定“背景图从哪个盒子的左上角开始摆放”，可选值：padding-box（默认）、border-box、content-box。注意background-color和背景图的原点不同：颜色绘制跟background-clip有关，而图片绘制位置由background-origin决定。
background-clip决定“背景最终能显示到哪个区域”，超出区域的部分不显示，可选值：border-box（默认）、padding-box、content-box、text。
两者的区别用一句话总结：origin管“从哪开始画”，clip管“最终露哪一块”。
举个例子，你想让背景图从内容区开始，并且不覆盖内边距区域，写：
.section { background-image: url("bg.png"); background-origin: content-box; background-clip: content-box; }如果只设置background-origin: content-box，背景图确实从内容区开始计算坐标，但绘制区域默认还是border-box，所以背景图依然可能延伸到边框和 padding 下面。看起来好像没生效，其实是你漏了background-clip。
background-clip: text是做文字渐变效果的关键：
.title { background-image: linear-gradient(90deg, #f00, #00f); background-clip: text; color: transparent; }颜色设为transparent后，文字字形内部透出背景渐变，非常出效果。但 Safari 等浏览器需要-webkit-background-clip: text前缀，而且如果浏览器不支持，文字会变成透明的，需要做好降级。后面常见问题部分我会专门讲。
1.7 background-attachment 背景附着方式
这个属性控制背景图是否随元素内容一起滚动，可选值：scroll（默认）、fixed、local。
scroll：背景图跟元素本身绑定。元素在页面上滚走时，背景也跟着走；在元素内部滚动时，背景不跟着内部内容动。这是最常见的行为。fixed：背景相对整个视口固定，无论页面怎么滚动，背景纹丝不动。经典的“全屏固定背景”就用这个。local：背景相对于元素内容定位。当元素内部有滚动条时，内容滚到哪，背景就滚到哪。
local比较少见，但它有个有趣的场景：给一个带滚动条的表格容器设置background-attachment: local，内容滚动时背景也滚动，视觉上像表格自带斑马线背景跟着数据走；如果写成scroll，背景会固定不动，而内容滚过去，背景和内容错开，看起来非常难受。
fixed在 PC 端效果好，但移动端有兼容和性能问题。iOS 上某些旧版本会把fixed当成scroll处理，固定背景直接失效；另外它会让浏览器为这个图层额外创建合成层，产生额外内存和绘制开销。移动端建议要么用伪元素叠加固定背景，要么直接退化为普通背景。具体方案放在第 4 部分的问题排查里。
.hero { background-image: url("bg.jpg"); background-position: center center; background-size: cover; background-attachment: fixed; }2. background 简写的正确姿势
2.1 简写顺序与各属性的默认值
background简写可以把很多属性写在一行里，但因为它覆盖范围大，写错一个值，整条样式都可能解析失败。推荐的写法顺序是：
background: color image position / size repeat origin clip attachment;比如：
body { background: #f5f5f5 url("bg.png") center / cover no-repeat scroll padding-box content-box; }颜色可以出现在最前面，也可以放最后，但建议固定放在最前面，阅读起来更符合直觉。position和size必须用/分隔，而且size只有写在/后面才会被解析。下面这个写法是错的：
background: url("bg.png") center cover no-repeat;这里cover会被浏览器当成background-position的非法值，整行样式直接丢弃。
如果单独使用background简写而不写某个子属性，被省略的属性会恢复默认值，不是保留之前的设定。比如：
background: url("bg.png") no-repeat;等价于：
background-image: url("bg.png"); background-repeat: no-repeat; background-position: 0% 0%; background-size: auto; background-attachment: scroll; background-origin: padding-box; background-clip: border-box; background-color: transparent;这容易造成“覆盖写出问题”：上一行定义好了背景色，下一行简写又把它重置成透明。
2.2 简写会重置所有未写的子属性
接上文，这是background简写最大的坑：它是一个“全量赋值”的家伙，而不是“只修改你写的部分”。
项目里很常见的报错现场：
.btn { background-color: #fff; background: url("icon.png") no-repeat center; }第二行跑完之后，background-color变成transparent，按钮白色没了。你查半天不知道是哪里把颜色清掉的，其实罪魁祸首就是第二行的简写。
解决方式很直接：如果你想要保留某个子属性的值，就别用background简写覆盖，改用对应的长属性。上面的场景改成：
.btn { background-color: #fff; background-image: url("icon.png"); background-repeat: no-repeat; background-position: center; }这样更啰嗦，但语义清晰，不会在后续迭代里“炸掉”其他值。这也是我强调“项目维护期千万别依赖简写联动的隐含行为”的原因。
我在做公共组件样式时，会把背景相关拆成独立类，例如.bg-white只写background-color，.bg-image只写background-image，每个类职责单一，组合使用也无法互相重写。
2.3 position 与 size 在 / 前后的写法细节
background简写里最容易写错的就是position和size的/写法。
规则一：/前必须写position，/后必须写size。如果只写background: url(...) / cover no-repeat，这里省略了position，背景位置会取默认值0% 0%，图片从头平铺，而不是你以为的居中。这一点要特别注意。
规则二：position可以提供一个、两个或四个值。一个值时另一个方向自动为center；两个值分别对应水平和垂直；四个值对应right 20px bottom 10px这种边距组合。四种写法在简写里都能用。
规则三：size只支持长度、百分比、cover、contain、auto。使用时如果只写一个长度，第二个默认是auto。例如background: url(...) center / 400px no-repeat表示图片宽度 400px，高度按原始比例等比缩放。
一个完整示例：
.card { background: url("cover.jpg") right 20px top 20px / auto 300px no-repeat #fff; }意思是：白色底色，图片原始宽度自动，高度固定 300px，图片距离右边 20px、上边 20px，平铺方式是不重复。注意这里position用了两个“值”但其实是同一对位置，所以解析逻辑没问题。
2.4 多背景简写的逗号规则
多背景可以一次性写在同一个background简写里，层与层之间用逗号分隔，但整个简写里只能出现一个background-color，而且颜色必须放在最后一层的后面。因为背景色是全图的最底层，它不能属于某一层，只能放在最后。
.hero { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("bg.jpg") center / cover no-repeat; }这行代码实现“灰色半透明遮罩 + 铺满背景图”的组合。第一层渐变是遮罩，盖在第二层图片上方；第二层的position / size用center / cover控制。
多背景时，每次只修改其中一层也很容易错：你以为在background简写里加一个逗号加一层图就行，但整条简写会把所有子属性重置。所以多背景场景我更建议把background-image拆出来单独写，其他属性用长属性或独立短属性控制，否则图层一旦多起来，维护成本指数上升。
2.5 origin 与 clip 在简写中的联动
background简写里可以出现padding-box、content-box、border-box这类盒模型关键字，它们的含义要分两种情况：
- 整个简写只出现一个盒模型关键字：它同时作用于
background-origin和background-clip。 - 出现两个盒模型关键字：第一个设置
background-origin，第二个设置background-clip。
举例说明：
background: url("bg.png") no-repeat content-box;这里只写了一个content-box，等价于：
background-origin: content-box; background-clip: content-box;如果只想要背景图从内容区开始定位，但又希望背景色仍铺满整个盒子，上面的写法会把clip也一起改成content-box，背景色可能不再覆盖边框和 padding 区域，视觉上出现“边框区域没有背景颜色”的漏白。
正确的做法是拆开写：
background: url("bg.png") no-repeat; background-origin: content-box;或者简写里给两个值：
background: url("bg.png") no-repeat content-box border-box;这样origin是content-box，clip是border-box。我在团队代码审查里经常看到这一行，每次都忍不住提醒一下。
2.6 简写注意点速查表
| 场景 | 推荐写法 | 说明 |
|---|---|---|
| 只想换图片 | background-image: url(...) | 不要用background简写，以免重置其他值 |
| 换图片且保留背景色 | 分开写background-color和background-image | 简写会把颜色重置为透明 |
| 一次性全量初始化 | background: color image position/size repeat origin clip attachment | 慎用，必须知道所有默认值 |
| 多背景加颜色 | 颜色放最后一层之后 | 整条简写只能有一个颜色 |
| 只改 origin | 拆开写background-origin | 简写里的单个盒关键字会联动 clip |
| 文字渐变 | 拆开写background-image、background-clip: text、color: transparent | 这里不要用简写，必须单独控制 |
3. 实际项目中的背景组合用法
3.1 经典全屏背景与性能取舍
全屏背景几乎每个活动页都有，最常见的写法：
html, body { height: 100%; } .hero { background: url("hero.jpg") center center / cover no-repeat fixed; }cover会保证图片填满视口，但如果图片比例和容器比例不一致，图片会被裁掉一部分。裁左裁右还是裁上裁下，由background-position的center center决定，其实就是取图片中间区域。如果你重点想展示图片的上半部分，记得把center center改成center top。
性能上，fixed背景在页面滚动时会要求浏览器持续合成背景层，如果不做任何优化，在低端机上很容易看到明显掉帧。一个折中方案是把fixed去掉，退化为普通背景，反正移动端本来对fixed支持就一言难尽。另一个方案是用固定定位的伪元素来做：
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("hero.jpg") center / cover no-repeat; }这样背景图层独立且固定，不占文档流，而且z-index: -1让它藏在内容后面，兼容性和性能都更稳定。
另外强烈建议压缩大图。我见过项目里直接放一张 4000px 宽的源图做封面，结果移动端加载慢、内存峰值高。合理的做法是把图片压缩到 2 倍视口宽度以内，并转成更高效的格式，比如 WebP，体积能小好几倍，视觉差异几乎看不出来。
3.2 渐变背景的几种常见写法
渐变背景是background-image一张“假图片”，写法上比装饰图更灵活。
纯线性渐变做按钮：
.btn { background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }渐变加图片做页面头图：
.banner { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("banner.jpg") center / cover no-repeat; }这种“半透明黑色遮罩 + 底图”的组合几乎能适用于所有需要文字叠加的横幅图片，避免了图片本身被 UI 设计师单独压暗处理。
锥形渐变做装饰扫光：
.card::after { content: ""; background: conic-gradient( from 0deg, transparent 0%, rgba(255, 255, 255, 0.6) 10%, transparent 20% ); }渐变同样受background-repeat、background-position、background-size控制。如果你不设置background-repeat: no-repeat，一张渐变小图也会像纹理一样重复平铺，在某些场合反而是故意要的效果。
3.3 background-clip: text 的文字渐变效果
用背景做文字渐变，是近几年非常流行的一个技巧，也让 CSS 在没有 Canvas 的情况下能做出好看的标题字。
.gradient-title { font-size: 40px; font-weight: bold; background: linear-gradient(90deg, #f83600, #f9d423); -webkit-background-clip: text; background-clip: text; color: transparent; }关键点在于background-clip: text让背景只在文字真正的字形范围内可见，然后再把color设为透明，让文字显出背景色。
这类写法的兼容性注意点：
- Safari 仍要看
-webkit-前缀。 - 如果浏览器不支持
background-clip: text，文字颜色为transparent，会直接看不见。所以降级方案非常重要。可以用@supports做一个判断：
.gradient-title { color: #f83600; } @supports (-webkit-background-clip: text) or (background-clip: text) { .gradient-title { background: linear-gradient(90deg, #f83600, #f9d423); -webkit-background-clip: text; background-clip: text; color: transparent; } }这段代码让不支持的浏览器显示一个普通橙色标题，支持的浏览器才显示渐变文字，体验更好。
3.4 雪碧图定位实践
雪碧图把多个小图标合并成一张大图，减少 HTTP 请求，是前端性能优化的经典手段。定位的核心是background-position的负值坐标。
假设每个图标是 32px × 32px，第二个图标在大图上位于横向偏移 32px 处：
.icon-2 { width: 32px; height: 32px; background-image: url("sprite.png"); background-repeat: no-repeat; background-position: -32px 0; }这里-32px表示把雪碧图向左移动 32px，让第二个图标落到元素可视区域。
雪碧图定位最忌讳用百分比。因为百分比的计算依赖容器和图片尺寸的比例，很容易出现“定位偏移一两个像素”但怎么也调不准的情况。所以雪碧图定位全部用像素值。
如果还要对整个雪碧图做缩放，比如background-size: 64px auto，那么所有偏移量也要按比例换算，否则图标错位。这种换算最容易出错，写之前先在草稿纸上算清楚。
4. 常见问题与排查技巧实录
4.1 背景图不显示
背景图不显示是前端高频问题，排查步骤一般是：
| 症状 | 可能原因 | 解决办法 |
|---|---|---|
| 图片地址 404 | 路径写错，最常见 | 打开浏览器开发者工具，看 Network 面板对应请求是否 404 |
| 元素没有尺寸 | div默认宽高为 0，背景图没有绘制区域 | 给元素设置width、height、padding或内容尺寸 |
| 背景图层被覆盖 | 多背景顺序反了，或元素自身背景被父级覆盖 | 检查图层顺序，确认图片写在要显示层的上方 |
| 背景色为空导致图片看不出来 | 图片其实是透明 PNG，又被background简写重置了颜色 | 用background-color单独设置兜底色 |
background-size: 0 | 尺寸被写成 0 或非法值 | 检查background-size的取值，用cover、contain、auto或正数像素 |
经验是：先看元素尺寸，再看 Network 请求，最后看 Computed 面板里背景相关属性的最终值，基本能定位九成问题。
4.2 background-position 百分比没有居中
接前面 1.4 的公式，background-position的百分比计算是(容器尺寸 - 背景图尺寸) * 百分比。很多人把 50% 理解成“把图片中心放到容器中心”，这个理解只在图片比容器小时近似成立，但逻辑上并不完全等价。
举个例子，容器 600px，图片 200px：
background-position: 50% 0水平偏移是(600 - 200) * 50% = 200px，图片中心正好在容器中心。- 但图片 800px，容器 600px 时，
50%的水平偏移是(600 - 800) * 50% = -100px，图片会向左移动，图片内容展示的是从中间开始的区域，看起来像居中了——视觉上其实还是大致居中的。
真正容易出问题的是那个差值很大的情况，比如图片宽 200px，容器宽 1000px，background-position: 100%是(1000 - 200) * 100% = 800px，图片在容器里靠右贴边，这是符合预期的。所以百分比适合“等比定位”的场景，而center关键字语义更明确，简单场景直接用关键字就好。
4.3 background-attachment: fixed 在移动端失效
移动端写固定背景时，background-attachment: fixed经常“表现不一样”，原因是 iOS Safari 历史上对 fixed 的处理接近 scroll，滚动时背景跟着滚，视觉效果失效。而且fixed背景内存占用高，低端机滚动卡顿明显。
我的处理方案分三种：
方案一，伪元素固定背景：
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("bg.jpg") center / cover no-repeat; }方案二，移动端退化为普通背景：直接把background-attachment: fixed去掉，用background-size: cover保证图在页面初始高度铺满，后续背景跟着页面走。
方案三，滚动事件里手动位移背景，成本高，不推荐；除非你是做 Web 动画页，需要精确控制背景位置。
我的个人建议是：桌面端用fixed，移动端直接用伪元素方案，一套代码两端都稳。
4.4 background 简写把子属性的样式“吃掉”
这个在前面已经反复提过，但还是要单独给出排查方法。
典型现场：
.btn { background-color: #fff; } .btn.active { background: url("icon.png") no-repeat center; }.active的简写把背景色重置为透明，白色没了。排查时，打开开发者工具，选中元素，看 Computed 面板里的background-color，如果是transparent，说明有哪一行简写重置了它。定位到那行后，把它拆成长属性。
组织样式时，我习惯把背景颜色、图片、定位拆成独立功能类，避免不同类之间互相覆盖。这样即使样式顺序乱了，也不会出现整块颜色被吞掉的问题。
4.5 渐变文字显示为透明
background-clip: text做渐变文字最典型的报错是：文字完全消失。原因基本就两个。
第一个是color: transparent没写，文字本身的颜色把背景盖住了，此时背景渐变只能在字形边缘部分透出来，看起来脏脏的。第二个是缺少-webkit-background-clip: text前缀，Safari 不认标准写法，渐变无效，又因为color: transparent，文字直接变透明。
所以完整写法要同时具备：
background: linear-gradient(...); -webkit-background-clip: text; background-clip: text; color: transparent;降级方案用@supports，前面已经写了完整示例。这个技巧在 Logo、主标题、数字展示上效果极好，但每次都要记得浏览器兼容和 fallback。
4.6 开发者工具里的背景调试技巧
最后分享几个我常用的调试习惯。
一是看 Computed 面板。它能直接显示当前元素的background-color、background-image、background-position、background-size等最终计算值，排查“被重置”“被覆盖”最方便。
二是用 Styles 面板直接改数值。选中元素后，点开background-position边的色块或值，拖动鼠标就能实时预览偏移效果，比反复改代码刷新更快，尤其适合微调图标位置。
三是用截图对比设备模拟。移动端和 PC 端对background-attachment: fixed的渲染差异很大，所以每次改完背景相关样式，我都会切到设备模拟模式看一眼，再真机滚动测试一下，再收工。
这些调试方式谈不上高深，但能帮你在背景问题上省下大量时间。
最后说一个我个人长期坚持的小习惯：项目里背景相关的公共样式，一律拆成长属性写，background简写只用于一次性初始化或者明确要重置全部属性的场景。简写确实省代码，但它的重置语义在迭代中太容易埋雷。如果你发现某个元素的背景表现异常，先看一下是不是有一行background简写把某个颜色或图片带崩了，十有八九问题就出在那里。把思路理清，背景相关的开发效率能提升一大截。
