css中url()路径错误是背景图不显示的主因，需按CSS文件位置而非html位置写相对路径；大小写敏感、Network查状态码、background简写覆盖、容器无尺寸等亦为常见原因。
路径写错：CSS 中的 url() 是相对 CSS 文件位置解析的
这是 80% 以上背景图不显示的根源。很多人按 HTML 的 src 习惯写路径，但 CSS 里 background-image: url("images/bg.jpg") 的“当前目录”是 CSS 文件所在文件夹，不是 HTML 所在目录。
- 项目结构为
/index.html、/css/style.css、/images/bg.jpg→ 在style.css中必须写url("../images/bg.jpg") - 误写成
url("images/bg.jpg")（从css/下找images/，不存在）或url("/images/bg.jpg")（根路径，需确认服务器是否支持且资源确实在该位置）都会失败 - 大小写敏感：linux 服务器上
bg.JPG≠bg.jpg；空格、中文、未编码特殊字符也会中断加载
Network 标签页里看状态码，比猜路径快十倍
打开开发者工具（F12）→ 切到 Network → 刷新页面 → 在筛选框输入图片名（如 bg.jpg），直接看请求结果：
-
404：路径错，立刻回头核对 CSS 文件位置和相对层级 -
403：服务器拒绝访问，检查图片权限或 nginx/apache 是否拦截了静态资源 -
200但没图：说明资源加载成功，问题出在容器尺寸、样式覆盖或background-size裁剪上 - 完全没出现该请求：CSS 规则根本没生效（选择器不匹配、被注释、或语法错误导致整条规则失效）
background 简写值会清掉 background-image
哪怕只写 background: #fff，也会把之前设置的 background-image、background-repeat 全部重置为默认值——这是最隐蔽的“覆盖”原因。
- 检查开发者工具中该元素的最终
background-image值：如果带删除线（strikethrough），说明被更高优先级规则覆盖 - 避免混用：不要先写
background-image: url(...)，再写background: #000；要么全用简写，要么拆开写background-color、background-image等子属性 - 注意权重：
!important能临时绕过，但更应检查是否有 ID 选择器或内联样式无意中压过了你的类
容器没尺寸 or display: none → 背景图天然不可见
background-image 不会像
默认
height: 0，再漂亮的图也白搭。立即学习“前端免费学习笔记（深入）”；
- 快速验证：给元素加
border: 1px solid red或min-height: 100px，看框是否出现 - 常见坍缩场景：父容器没设
height，子元素又浮动或绝对定位；用了height: 100%但所有上级都没高度定义 - 移动端陷阱：
background-attachment: fixed在部分 ios safari 或 iframe 内可能失效，建议先测试scroll模式
真正卡住人的，往往不是“会不会写”，而是“以为路径对了，其实差了一级”或“明明写了 background-image，却被一行 background: white 默默抹掉”。每次怀疑背景图不显示，先开 Network 看请求，再查计算样式里的 background-image 值是否被划掉——这两步做完，90% 的问题就定位清楚了。