背景图片未显示最常见的原因是路径错误或资源未加载，其次为样式覆盖、元素尺寸为0或不可见、背景图被裁剪/透明度干扰；调试应按network→elements→尺寸验证三步排查。
背景图片没显示但 CSS 写了 background-image
最常见原因是路径错误或资源未加载。浏览器控制台（F12 → console / Network）里通常会报 404，点开就能看到它试图请求的完整 URL —— 很可能比你想象中多了一层 ./ 或少了个 /Static。
- 用相对路径时，
background-image: url("img/bg.jpg")的基准是 html 文件所在位置，不是 CSS 文件位置（这点和@import不同） - 用绝对路径更稳：
background-image: url("/assets/bg.jpg")，前提是服务器把/assets/映射到了对应目录 - 检查图片文件是否真在对应路径下，大小写、扩展名（
.JPG≠.jpg）都要一致 - 如果图片在 CSS 里用 base64 编码，确认编码串没被意外截断或换行
background-image 被其他样式覆盖了
CSS 层叠顺序会让后面的规则生效，哪怕前面写了 background-image，也可能被后面某条 background: none 或 background: #fff 干掉。
- 在开发者工具里选中元素，看右边 Styles 面板中
background-image是否被划掉（表示被覆盖） - 注意
background是简写属性，设它会重置所有子属性，包括background-image - 优先级冲突时，加
!important只是临时手段；更可靠的是提高选择器特异性，比如从.card改成div.card
元素尺寸为 0 或不可见导致背景“消失”
背景图只在元素有宽高且内容/布局撑开它时才可见。空 div、display: none、visibility: hidden 都会导致背景不渲染。
- 给元素加个临时
border: 1px solid red，确认它是否真占空间 - 检查是否误用了
height: 0、padding: 0、overflow: hidden等抑制尺寸的属性 -
visibility: hidden会隐藏内容但保留空间，背景仍可渲染；display: none则完全移出渲染树，背景也不画 - flex 或 Grid 容器里子项没设置
min-width/min-height，可能被压缩到 0
背景图被裁剪或透明度干扰
即使图片加载成功，也可能因 background-size、background-position 或父级 overflow 设置不当，让人误以为“没显示”。
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover在宽高比不匹配时会裁剪边缘，试着换成contain或具体像素值看看 -
background-position: center top可能把图“推”到可视区外，尤其配合background-attachment: fixed时 - 父容器设了
overflow: hidden，而背景图靠background-position偏移出边界，就会被切掉 - 如果用了
opacity: 0.5或半透明白色遮罩层，背景图可能显得极淡，像没加载
实际调试时，先打开 Network 看图是否 404，再开 Elements 看样式是否被覆盖，最后加 border 和临时背景色确认尺寸 —— 这三步能定位九成问题。真正难的往往不是语法，而是路径和层叠逻辑在具体项目结构里的表现。