CSS中background-image的url()路径以CSS文件位置为基准解析，而非HTML位置；常见404源于路径计算错误、大小写不匹配或缓存干扰，需结合Network与Elements面板交叉验证。
background-image 路径解析失败导致 404
浏览器控制台出现 404 Not Found 是最直接的信号，说明图片根本没加载进来。根本原因不是 CSS 写错了，而是 url() 里的路径是相对于 CSS 文件位置计算的，不是 HTML 页面位置。
- 比如
css/style.css里写url("bg.png")，浏览器会去找css/bg.png，而不是bg.png或images/bg.png - 常见修复：用
../回退目录，例如图片在images/bg.png，CSS 在css/下，就写url("../images/bg.png") - Linux 服务器严格区分大小写，
URL("Images/bg.jpg")找不到images/bg.jpg—— 建议统一小写命名
图片加载成功但页面不显示
Network 面板看到图片状态码是 200，右键“Open in new tab”也能正常打开，但页面就是空白 —— 这说明资源到位了，但渲染条件不满足。
- 容器没有尺寸：
background-image不会像<img alt="为什么CSS background-image加载后不显示" >那样撑开父元素，必须显式设置width、height或min-height -
position: absolute元素漏写了width和height，浏览器可能算出0×0区域，背景自然不可见 - 父容器高度坍缩：如果子元素用了
absolute，父容器又没设position: relative且无内容，高度为 0，背景图也就没了
background 简写覆盖了 background-image
这是最隐蔽的问题之一：只要某处写了 background: #fff 或 background: transparent，就会把之前单独设置的 background-image、background-repeat 全部重置为默认值。
- 检查开发者工具 Elements 面板中该元素的最终
background-image值 —— 如果带删除线（strikethrough），说明被更高优先级规则覆盖 - 避免混用：要么全用简写（如
background: url(...) no-repeat center/cover），要么只用子属性（background-image、background-size等） - 特别注意内联样式或 ID 选择器，它们权重远高于 class，容易意外压过你的背景设置
缓存导致“改了却没变”
明明改了路径、替换了图片文件，刷新页面还是旧效果或空白 —— 大概率是浏览器缓存了旧 CSS 或旧图片资源。
立即学习“前端免费学习笔记（深入）”；
- 普通 F5 刷新无效，必须强制刷新：
Ctrl + Shift + R（Windows/Linux）或Cmd + Shift + R（macOS） - 开发时可临时禁用缓存：Chrome DevTools → Network → 勾选 “Disable cache”
- 验证是否真生效：Network → Img 标签页，清空后刷新，看请求 URL 和状态码是否符合预期
