background-image 的 url() 路径始终相对于 CSS 文件所在目录；例如 css/style.css 中引用 images/bg.png 需写为 url("../images/bg.png")，绝对路径则用 url("/images/bg.png")。
background-image 的 url() 路径是相对于 CSS 文件位置的
很多人误以为 url() 里的路径是相对于 HTML 文件，结果改来改去还是 404。实际规则很明确：CSS 中所有 url() 的路径解析起点，是该 CSS 文件在项目中的物理位置，不是 HTML，也不是浏览器当前访问地址。
比如你的项目结构是：
project/
├── index.html
├── css/
│ └── style.css
└── images/
└── bg.png
那么在 css/style.css 里写 url("images/bg.png") 就会失败——它实际去找的是 css/images/bg.png，根本不存在。
- ✅ 正确写法：
url("../images/bg.png")（../表示从css/退到上一级） - ✅ 绝对路径写法（推荐用于稳定部署）：
url("/images/bg.png")（从网站根目录开始） - ⚠️ 不要用
./开头去“模拟当前目录”，因为./在url()中意义模糊，不同工具链处理不一致
用开发者工具 Network 面板直接验证路径是否 404
别靠猜，打开浏览器 DevTools（F12），切到 Network → Img 标签页，刷新页面。如果背景图请求显示为红色 404，就说明路径错了；如果是 200 但没显示，问题在其他地方。
立即学习“前端免费学习笔记（深入）”；
- 点击该 404 请求，看 “Preview” 或 “Response” 是否为空，确认是不是真的找不到文件
- 右键请求 → “Open in new tab”，直接访问那个 URL —— 如果打不开，路径错；如果能打开但页面不显示，说明 CSS 生效了但被覆盖或容器无尺寸
- 注意：Chrome 禁止
file://协议加载本地资源，此时 Network 里可能连请求都不发，必须用 Live Server 启服务
内联 style 和外链 CSS 的 url() 解析规则一致
有人试过把 background-image 写进 HTML 的 style 属性里（如 <div style="background-image: url(./img/bg.png)">），发现能显示，就以为“内联更可靠”。其实不是规则不同，而是路径基准变了：此时 url() 是相对于当前 HTML 文件位置解析的。
- ❌ 错误推论：“外链 CSS 的 url() 不好使”
- ✅ 正确理解：只要路径基准统一、写对了，外链 CSS 完全没问题；反而内联写法难以复用、易出错、无法缓存
- ? 调试时可临时把样式挪到
<style>标签里（仍属外链逻辑），快速验证是否路径问题，避免混淆
background-size: 100% 100% 可能拉伸失真，cover/contain 更合理
background-size: 100% 100% 强制拉满宽高，不管原始比例，图片常被压扁或拉长。这不是“不显示”，而是显示得不像原图，容易误判为失效。
- ✅ 推荐用
background-size: cover（等比缩放，填满容器，可能裁剪） - ✅ 或
background-size: contain（等比缩放，完整显示，可能留白） - ⚠️ 注意：如果容器本身没有明确宽高（比如空
<div>），cover也无效——背景不会撑开元素 - ? 检查容器是否渲染：加一句
border: 1px solid red，看看盒子是否存在、有多大
最常被忽略的其实是路径基准和容器尺寸这两个点，尤其是当项目从单文件 HTML 迁移到多层目录结构时，../ 数量一少或多，立刻 404。调试时别跳步，先 Network 看请求，再检查容器盒模型，最后才动样式优先级或缓存。
