背景图不显示主因是路径错误、容器无高度或background-size未配对；路径需相对CSS文件，全屏需清margin、设min-height:100vh并用cover和no-repeat。
背景图不显示，90% 是路径错了、容器没高度、或 background-size 没配对 —— 不是代码写得不够多，而是这三个地方没对齐。
background-image 路径为什么总 404
浏览器加载 background-image 时，路径是相对于 CSS 文件位置计算的，不是 HTML 文件。比如 CSS 在 /static/css/main.css，图在 /static/images/bg.jpg，就必须写 url("../images/bg.jpg")。
- 用绝对路径要从网站根目录起算：
url("/images/bg.jpg")合法，url("images/bg.jpg")很可能 404 - 本地双击打开 HTML（
file://协议）时，部分浏览器会拦截图片请求，建议起个本地服务测试，比如python3 -m http.server - Linux 服务器大小写敏感：
bg.JPG和bg.jpg是两个文件，本地开发不报错 ≠ 上线能用 - 直接看 DevTools 的
Network面板，找带 404 的图片请求，别靠“没看见”瞎猜
全屏背景图死活不占满视口
body 默认有 margin（通常是 8px），且没有明确高度，背景图只画在内容区域，上下左右留白。
- 先清
body { margin: 0; }，或者全局重置：* { margin: 0; padding: 0; } - 设
min-height: 100vh，不是height: 100%（后者依赖父级高度，而html默认没设高） - 必须加
background-size: cover，否则默认按原尺寸平铺，大概率只看到左上角一丁点 - 加上
background-repeat: no-repeat，不然小图会密密麻麻铺满整个屏幕
局部背景图（比如 banner div）不显示或错位
空 div 没内容、没宽高、没布局约束，背景图就无处可画；即使画了，定位和缩放没调好也会切掉重点内容。
- 确保元素有明确宽高：
height: 400px、min-height: 50vh，或用display: flex/grid布局撑开 -
background-position: center center是安全起点，但若图顶部有人脸/标题，改用center top防止被裁 - 慎用
background-size: 100% 100%：强制拉伸必变形，尤其人像类图片一眼假 - 文字看不清？别直接加
background-color: rgba(0,0,0,0.5)——它会盖住背景图；改用伪元素遮罩：::before+z-index: 1
background-attachment: fixed 在手机上失效
iOS Safari 和不少安卓 WebView 对 fixed 支持极差，滚动时背景卡顿、闪烁甚至完全消失。这不是你代码的问题，是渲染引擎限制。
- 移动端优先用
background-attachment: scroll（默认值），禁用fixed - 如果必须实现视差效果，改用 JS 控制 transform 或用
position: sticky模拟，别硬扛 - 全屏 banner 场景下，
fixed几乎没价值 —— 用户滑动时背景不动反而割裂体验
最常被忽略的其实是图片本身：一张 400×300 的图，用 cover 拉到 iPhone 15 Pro Max 屏幕尺寸（1290×2796），必然糊。分辨率、宽高比、容器尺寸三者得一起看，不能只调 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
