background-image路径始终相对于css文件所在目录，而非html文件；例如css在css/style.css、图片在images/bg.jpg时，必须写url("../images/bg.jpg")。
background-image 路径是相对于 CSS 文件，不是 HTML 文件
这是最常被误读的规则。浏览器解析 url("xxx.png") 时，基准点永远是当前 CSS 文件所在的目录，和 index.html 放在哪毫无关系。哪怕你把 HTML 放在根目录、CSS 放在 css/style.css、图片放在 images/bg.jpg，路径也必须写成 url("../images/bg.jpg")，而不是 url("images/bg.jpg") 或 url("/images/bg.jpg")（后者是根路径，另说）。
验证方法很简单：打开开发者工具 → Network → 切到 Img 标签页 → 刷新，看请求 URL 是什么；右键那个 404 的图片名 → “Open in new tab”，浏览器地址栏里显示的完整路径，就是 CSS 中该 url() 实际拼出来的地址。
用开发者工具直接验证 background-image 是否加载成功
别只盯着元素面板里的 Styles 栏看“有没有写上”。要确认是否真加载了，得看 Network 面板：
- 刷新前先清空 Network 记录（点左上角垃圾桶图标）
- 刷新页面，筛选出
Img类型请求 - 找对应图片名，看状态码：
200表示路径对、服务器返回正常；404就是路径错；200但图还是不显示？复制 URL 在新标签页打开，确认图片本身能渲染（排除损坏、MIME 类型错误或格式不支持）
注意：如果用了 background: url(...) no-repeat; 这类简写，而图片没出来，优先拆成单独的 background-image 和 background-repeat 写法——复合属性顺序错或缺值，某些浏览器会静默丢弃整个声明。
body 元素没高度也会导致背景图“消失”
背景图需要渲染在有尺寸的盒子里。默认情况下，body 没设 height，它的高度由内容撑开。如果页面空或只有几行文字，body 高度可能就几十像素，背景图自然只在那一小条里画，根本看不见。
常见解决方式：
- 给
body加min-height: 100vh;（推荐），确保至少占满视口 - 同时加
margin: 0;，移除浏览器默认外边距，避免顶部/底部留白干扰视觉覆盖 - 不要只设
height: 100%;—— 它依赖父容器（html）也有明确高度，否则无效
如果背景图仍只在局部出现，检查 computed 样式里 background-position 是否偏移过大，或 background-size: cover; 导致图片被裁剪到视野外。
相对路径写错的典型组合与修正
假设你的项目结构是：
project/
├── index.html
├── css/
│ └── style.css
└── images/
└── bg.jpg
那么在 css/style.css 里引用 bg.jpg 的正确写法只有这一种：url("../images/bg.jpg")。
容易错的写法及原因：
-
url("images/bg.jpg")→ 浏览器会在css/目录下找images/，实际不存在 -
url("/images/bg.jpg")→ 这是根路径，要求部署时网站必须跑在域名根目录（如https://site.com/）。若跑在子目录（如https://site.com/myapp/），就会 404 -
url("bg.jpg")→ 默认找css/bg.jpg，不是你想的那个图 - 漏掉扩展名，比如写成
url("bg")→ 服务器找不到bg这个资源，返回 404
大小写也要当心：Linux 服务器区分 Bg.jpg 和 bg.jpg，本地开发用 Windows 可能不报错，一上线就挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
