全屏背景图需清除body默认margin、设min-height:100vh、background-size:cover和no-repeat；局部背景图要确保元素有宽高、合理设置position和size；路径须相对CSS文件或用根路径，注意大小写；fixed在移动端失效需降级。
全屏背景图不是加在 上就自动撑满，局部背景图也不是写个 background-image 就能看见——核心卡点永远是路径、尺寸、缩放行为三者没对齐。
background-image 路径为什么总 404？
图片请求失败，90% 是路径相对于 CSS 文件位置算错了。HTML 文件路径和 CSS 文件路径不是一回事，浏览器加载背景图时只认 CSS 文件所在目录为基准。
- 如果 CSS 在
/static/css/main.css，图在/static/images/bg.jpg，必须写url("../images/bg.jpg") - 用绝对路径要从网站根目录起算，
url("/images/bg.jpg")才合法；url("C:\xxx\bg.jpg")或url("images/bg.jpg")（当 CSS 不在 HTML 同级时）基本等于白写 - 大小写敏感：Linux 服务器上
bg.JPG和bg.jpg是两个文件，本地开发不报错不代表上线能用 - 检查 DevTools 的 Network 面板，直接看请求是否返回 404，别靠“看起来没显示”瞎猜
全屏背景图死活不占满视口？
默认有 margin（通常是 8px），且没有明确高度，导致背景图只画在内容区域，上下左右留白。
- 先清全局 margin：
* { margin: 0; }或至少body { margin: 0; } - 给
body或目标容器设min-height: 100vh，不是height: 100%（后者依赖父容器高度，而html没设高时它就是 0） - 必须配
background-size: cover，否则默认平铺+原始尺寸，大概率只看到左上角一丁点 - 加
background-repeat: no-repeat，不然小图会密密麻麻铺满整个屏幕
局部背景图（比如 banner div）不显示或错位？
局部元素没内容、没高度、没宽高约束，背景图就无处可画；即使画了，定位和缩放没调好也会切掉重点内容。
立即学习“前端免费学习笔记（深入）”；
- 确保元素有明确宽高：
height: 400px、min-height: 50vh，或用 flex/grid 布局撑开 -
background-position: center center是安全起点，但若图顶部有人脸/标题，改用center top防止被裁 - 慎用
background-size: 100% 100%：强制拉伸必变形，尤其人像类图片一眼假 - 如果文字看不清，别调
background-color: rgba(0,0,0,0.5)——它会盖住背景图；改用伪元素遮罩：::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; }
background-attachment: fixed 在手机上失效？
iOS Safari 和部分安卓 WebView 对 fixed 支持极差，滚动时背景卡顿、闪烁甚至完全消失，不是你代码有问题，是浏览器限制。
- 真要视差效果，优先用 JS 滚动监听 + transform，或 CSS
scroll-snap分屏模拟 - 如果坚持用
fixed，务必加降级：在@media (hover: none) and (pointer: coarse)里重置为scroll - 别在
overflow: hidden的父容器里嵌套fixed背景，渲染层叠关系会出问题
最常被忽略的其实是兜底逻辑：没图时页面不该是一片空白。加一行 background-color: #f0f0f0，再配合 background-image，加载失败也能保基本体验。
