background-size 失效主因是声明顺序错误或被复合属性覆盖，需先写 background 再单独设 background-size；多背景时须用逗号配对；容器无尺寸则百分比无效；还需排查简写重置、样式权重及图片加载失败。
background-size 失效，90% 不是浏览器兼容问题，而是 CSS 声明顺序或覆盖逻辑出错。它本身不“坏”，只是被忽略或被重写。
为什么 background-size 写了却没反应？
最常见原因是它出现在 background 或 background-image 声明之前。CSS 解析是自上而下、后声明优先的，但 background 是复合属性，一旦被完整设置（比如 background: url(...) no-repeat;），就会把之前单独写的 background-size 全部清空——不是覆盖，是丢弃。
- ❌ 错误写法：
background-size: cover;写在background: url(...) no-repeat;上面 - ✅ 正确顺序：先设
background（含图片路径和重复方式），再单独设background-size - ⚠️ 注意：如果用了
!important在background上（比如background: url(...) no-repeat !important;），那后续任何background-size都无效，因为整个背景声明已被锁定
多个背景图时 background-size 怎么配对？
当用逗号分隔多个背景图（如渐变 + 图片），background-size 也必须用逗号对应，否则会按“从左到右”自动分配，容易错位。
- 例如：
background-image: linear-gradient(...), url(logo.png); - 对应写法：
background-size: auto, 24px 24px;—— 第一个值给渐变（通常用auto），第二个给图片 - ❌ 错误：
background-size: 24px 24px;只写一个值，会被应用到第一个背景（渐变），图片反而没尺寸控制 - ⚠️ 所有背景子属性（
background-position、background-repeat）都遵循同样逗号配对规则
容器没尺寸，background-size: 100% 100% 就是摆设
100% 100% 是相对于容器宽高的百分比。如果容器本身宽高为 0（比如未设 width/height，且子元素不撑开它），那 100% 就是 0px，图片自然不可见。
- 检查父级是否设置了
display: flex或display: grid却忘了给子元素设尺寸 - 用开发者工具看该元素的 computed width/height 是否为
0 - 临时加
border: 1px solid red看容器是否真的存在、有多大 -
contain和cover也依赖容器尺寸，它们不会“强行创建空间”
某些场景下 background-size 会被间接覆盖
除了显式声明冲突，还有几种隐蔽失效方式：
- 使用了
background简写但漏掉关键项，例如：background: url(img.jpg);—— 这会重置background-repeat为repeat，同时把之前设的background-size清零 - 外部样式表或框架（如 Bootstrap）里已有
background声明，且权重更高，你的background-size被忽略 - 图片本身加载失败（404），浏览器不渲染背景，
background-size也就无从生效 —— 先看 Network 面板确认图片是否成功加载
真正卡住的时候，别急着调数值，先打开开发者工具 Elements 面板，逐行看 computed 样式里 background-size 是否被划掉、被什么覆盖、对应容器尺寸是否合理。顺序、作用域、尺寸，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
