背景图不显示主因是路径错误、语法不合法、元素尺寸为0或被其他样式覆盖；CSS中路径相对CSS文件位置，须用url()包裹，注意大小写、空格及绝对路径以/开头。
background-image 路径写错是最常见原因
浏览器控制台报 404 或直接空白，八成是路径没对上。CSS 里的 background-image 路径是相对于 CSS 文件所在位置计算的，不是 HTML 页面位置。
- 如果 CSS 在
/static/css/style.css，图片在/static/images/logo.png，就得写url(../images/logo.png) - 用绝对路径更稳：以站点根目录为起点，比如
url(/images/logo.png)（注意开头的/） - 路径里有空格或中文？立刻改掉——很多服务器不支持，换成短横线或下划线，例如
bg-banner.png - 大小写敏感！
Logo.png和logo.png在 Linux 服务器上就是两个文件
background-image 属性值格式不合法
少一个括号、多一个引号、漏了 url()，都会让整个声明失效，浏览器会静默忽略。
- 必须用
url()包裹路径，不能只写"images/bg.jpg" - 引号可选，但建议统一用双引号：
url("images/bg.jpg")；如果路径含括号或空格，必须加引号 - 别漏掉分号：
background-image: url("bg.jpg");后面没分号，可能影响后续样式解析 - 多个背景图用逗号分隔：
background-image: url("a.jpg"), url("b.jpg");，顺序和background-position要对应
元素尺寸为 0 导致背景不可见
background-image 不会撑开元素。如果 div 没内容、没设宽高、也没 padding，它实际是 0×0，自然看不到图。
- 先确认元素是否渲染出来：在开发者工具里选中元素，看盒模型尺寸是不是 0
- 临时加个
background-color: red;，看色块有没有出现——有颜色没图，基本就是路径或属性问题 - 给元素设
width和height，或用min-height: 100vh;看效果 - 用 Flex 或 Grid 布局时，父容器没高度也会导致子元素塌陷，要逐层检查
被其他样式覆盖或触发隐藏行为
看似写了 background-image，但可能被更高优先级规则干掉了，或者被某些属性“屏蔽”了。
立即学习“前端免费学习笔记（深入）”；
- 检查是否被
background: none;、background: transparent;或简写属性（如background: #fff;）覆盖——简写会重置所有背景相关属性 -
background-size: 0 0;或background-repeat: no-repeat;配合错误的background-position可能让图跑出可视区 - 父元素有
overflow: hidden;，而背景图靠background-position偏移后超出范围，也会“消失” - 开启硬件加速（如
transform: translateZ(0);）在某些旧版 Safari 中会意外禁用背景图渲染
/* 排查时可临时加这一段，确保基础可见 */
.my-element {
background-image: url("/images/test.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 300px;
height: 200px;
background-color: #eee; /* fallback */
}路径、语法、尺寸、覆盖，这四点串起来查一遍，95% 的背景图不显示问题都能定位。最容易被忽略的是路径相对基准和简写属性的覆盖效应——特别是团队协作时，别人改过全局 background 重置规则，你却只盯着自己的那行 background-image。
