最常见原因是路径写错，CSS中相对路径相对于CSS文件位置解析；需用开发者工具Network标签检查请求状态，确认未被覆盖、容器有尺寸且环境路径一致。
检查 background-image 路径是否正确
最常见原因是路径写错，尤其是相对路径在 CSS 文件中是相对于 CSS 文件位置解析的，不是 HTML 文件位置。
比如 HTML 在 /index.html，CSS 在 /css/style.css，而图片在 /images/logo.png，那么在 CSS 中必须写：
background-image: url("../images/logo.png");而不是 url("images/logo.png") 或 url("/images/logo.png")（后者是根对齐，需确认服务器是否支持）。建议统一用开发者工具的「Network」标签页看请求地址和状态码：404 表示路径错，403 可能是权限问题，200 但没图可能是 MIME 类型或图片本身损坏。
确认 background-image 没被更高优先级规则覆盖
CSS 层叠规则会让同名属性被后续或更具体的选择器覆盖。即使写了 background-image，也可能被 background: none、background: transparent 或 background: #fff 这类简写值清掉。
排查时注意：
- 在开发者工具中检查该元素最终计算出的
background-image值，灰色 strikethrough 表示被覆盖 -
background简写会重置所有子属性，包括background-image，哪怕你只写background: #000 - 内联样式、
!important、ID 选择器、类选择器的权重顺序要心里有数，别依赖“后写的一定生效”
验证图片加载是否受尺寸或显示条件限制
background-image 不会像 0 或 display: none，背景图自然不可见。
典型场景包括：
- 父容器未设高度，子元素又没内容，导致高度坍缩
- 用了
background-size: cover但容器太小，图片被裁剪到看不见内容 - 设置了
background-position: center，但图片本身是纯色或透明区域居中 - 开启了
background-attachment: fixed，但在某些移动端浏览器或 iframe 中不生效
快速验证：临时加 border: 1px solid red 或 min-height: 100px 看容器是否存在。
立即学习“前端免费学习笔记（深入）”；
留意开发环境与生产环境的路径差异
本地双击打开 HTML（file:// 协议）时，浏览器对跨目录访问图片更敏感，部分路径（如 ../ 向上跳）可能被安全策略阻止；而通过 localhost 启服务则通常正常。
另外构建工具（Vite、Webpack、Next.js）常会重写资源路径，比如把 url("./icon.png") 编译成 url("/assets/icon.abc123.png")。此时硬写绝对路径或忽略构建配置会导致线上失效。
解决办法：
- 开发时尽量用本地服务（
npx serve、vite）而非直接打开文件 - 在构建配置中确认
public目录或assetsInclude是否包含你的图片类型 - 用
url()内联 base64（仅小图）或改用
真正卡住的时候，往往不是语法错了，而是你以为的“当前目录”和浏览器实际解析的“当前目录”根本不是一回事。
