背景图显示失败主因是路径错误、容器高度为0、尺寸设置不当或缺少兜底策略；需检查Network中图片是否404、设min-height:100vh、正确使用url()、合理选background-size值、加渐变遮罩和background-color兜底。
背景图加不上，八成不是代码写错，而是路径、尺寸或容器高度没处理好。直接用 background-image 是对的，但光写这一句基本等于没写。
为什么 background-image 写了却看不到图片
浏览器不会报错，只会静默失败——最常见原因是路径 404 或容器高度为 0。
- 打开开发者工具的 Network 标签页，过滤
Img，看图片请求是不是返回404；如果是，说明url("xxx.jpg")中的路径错了 - 相对路径以 HTML 文件位置为基准，不是 CSS 文件位置；比如 HTML 在根目录，图片在
/assets/bg.jpg，就写url("/assets/bg.jpg")（推荐根目录绝对路径） -
body没内容时高度塌陷，背景只显示一屏高；加min-height: 100vh或干脆把背景设在html上更稳妥 - 别漏写
url()函数：写成background-image: assets/bg.jpg是无效的
background-size cover 和 contain 的实际区别
这两个值控制缩放逻辑，选错会导致裁剪过度或大片留白，尤其在移动端。
-
background-size: cover：等比缩放，填满容器，可能裁掉上下或左右边缘；适合全屏 banner，但得确认关键内容在中心区域 -
background-size: contain：等比缩放，完整显示整张图，四周可能留白；适合 logo、图标类小图做背景 -
background-size: 100% 100%：强制拉伸，一定变形；除非你明确要这种效果，否则避开 - 老安卓 WebView 对
cover支持不稳定，可加一行background-size: -webkit-cover;兼容
文字看不清？别调亮图片，加遮罩更可控
直接改图片亮度或透明度会影响所有元素，且不可逆；用 CSS 渐变层叠才是标准解法。
立即学习“前端免费学习笔记（深入）”；
- 在
background属性里用逗号分隔多层：先写渐变，再写图片，确保渐变盖在图上 - 例如：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/img/bg.jpg"); - 加
background-color做兜底：图片加载失败时不至于一片空白，比如background-color: #e0e0e0; - 文字区域建议加
position: relative和z-index，避免被其他层意外覆盖
body 上设背景图容易踩的坑
看似最简单，实则问题最多：高度塌陷、移动端 fixed 失效、滚动卡顿、层级错乱。
-
background-attachment: fixed在 iOS Safari 和部分安卓 WebView 中不触发硬件加速，滚动会卡；生产环境慎用 - 如果页面内容少，
body高度不够，背景只渲染可视区；要么设min-height: 100vh，要么把背景挪到html上 -
background简写属性（如background: url(...) no-repeat center/cover;）会重置所有子属性，包括background-color，务必检查是否误删兜底色 - 用 base64 小图可绕过路径问题，但太长会拖慢 CSS 解析；仅限图标类资源，别塞大图
真正难的不是“怎么加”，而是“加完之后它是否稳定出现在所有设备、所有网络状况、所有加载时机下”。路径、尺寸、容器高度、兜底策略，四个点缺一不可。
