background-image 的 url 路径始终相对于 css 文件所在目录；例如 css 在 /css/style.css 中，引用 ../images/bg.jpg 会解析为 /images/bg.jpg，而非 html 文件位置。
background-image 的 url() 路径是相对 CSS 文件位置的
很多人写 background-image: url("images/bg.jpg") 时，下意识按 HTML 的 <img src="images/bg.jpg"> 习惯去理解路径——这是最根本的误判。CSS 中的 url() 永远以该 CSS 文件的物理位置为起点，不是 HTML 所在目录。
常见结构示例：/index.html、/css/style.css、/images/bg.jpg：
-
url("images/bg.jpg")→ 错：从css/目录下找images/，但实际images/和css/是同级 -
url("../images/bg.jpg")→ 对：从css/向上退一级（到根），再进images/ -
url("/images/bg.jpg")→ 可行但需确认部署环境：这是根相对路径，依赖服务器将请求正确映射到文件系统
Network 标签页里看不到图片请求？先查 CSS 是否生效
打开开发者工具（F12）→ Network → 刷新 → 筛选图片名，如果压根没出现该请求，说明问题不在路径本身，而是 CSS 规则根本没被应用：
- 选择器不匹配（比如写了
.hero { ... }，但 HTML 里是<div id="hero">）<li> <code>background-image所在规则被语法错误中断（如前面缺分号、引号不闭合：background-image: url("bg.jpg);） - 整条规则被注释或被其他样式表覆盖（检查 Elements 面板中该元素的 computed 样式，看
background-image是否带删除线） - 路径大小写是否完全一致？Linux 服务器上
bg.JPG≠bg.jpg，Windows 本地可能不报错，但上线必挂 - 文件扩展名是否拼错？
.jpeg写成.jpg，或反斜杠未转义（Windows 路径中必须写成/或\） - 静态资源是否被拦截？Nginx/Apache 配置了
location ~* .(jpg|jpeg|png|gif)$ { deny all; }类规则，或 GitHub Pages 项目页面要求路径带仓库名前缀（如/my-repo/images/bg.jpg） - 元素没有宽高：
div默认高度为 0，设了background-image也看不见；加height: 100vh或内容撑开 -
background简写值清空了图片：比如先写background-image: url("a.jpg")，又写background: #fff，后者会重置所有子属性，包括background-image - 父元素
opacity: 0、visibility: hidden或display: none，子元素背景自然不可见
状态码是 404 或 403？立刻核对三件事
Network 中看到图片请求返回 404 或 403，说明浏览器发出了请求但服务端拒绝或找不到资源：
状态码 200 却不显示？检查容器尺寸与简写覆盖
请求成功加载（200），但背景图还是空白，问题通常出在渲染层：
真正难排查的是简写覆盖和容器无尺寸——它们不会报错，也不会在 Network 里暴露问题，但会让图片“静默消失”。
