背景图不显示主因是路径解析错误，需按CSS文件位置而非HTML位置确认；background-size不生效常因被简写属性重置或容器无高度；HTML5语义标签需显式设宽高防塌陷。
背景图不显示：先确认
路径是否解析成功
浏览器
加载背景图失败，80% 源于路径问题。CSS 中的
是相对 CSS 文件位置解析的，不是 HTML 文件位置。比如：
这个
是从 CSS 文件所在目录向上一级，再进
目录找；若 CSS 是内联在 HTML 里，则按 HTML 当前 URL 解析。
排查建议：
打开浏览器开发者工具（F12），切换到
Network
标签页，刷新页面，搜索
或你用的图片名，看请求是否 404
右键检查元素 → 查看
Computed
面板里的
值，点进去链接，确认能否直接打开图片
避免使用绝对路径如
却部署在子路径（如
），此时应改用相对路径或根相对路径配合
不生效：常见被覆盖或值非法
本身不触发渲染失败，但若写法错误或被其他规则覆盖，会导致预期效果没出现。例如设了
却看不到铺满效果，往往不是它失效，而是背景图根本没加载出来（回到上一条排查）。
典型问题：
立即学习
“
前端免费学习笔记（深入）
”；
写了
但容器没有明确高度（如
且无内容撑开），结果背景区域高度为 0，图自然不可见
使用了简写
属性（如
），会**重置**
为初始值
，必须显式重写：
不支持 IE8 及更早版本，但现代项目基本无需考虑；若需兼容旧版 Edge，避免用
或
的双值写法（如
）
HTML5 布局下背景图“消失”的隐藏原因：语义化标签未设宽高或 display
HTML5 新增的
、
、
等是纯语义标签，浏览器默认
，但不会自动撑开高度——尤其当内部只有浮动元素或 flex 子项时，父容器可能塌陷。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这时即使
和
都正确，也看不到图，因为容器实际高度为 0。
验证与修复：
在开发者工具中选中该标签，看
Computed
面板的
是否为
临时加
到该元素，观察是否“看不见边框”
给容器加
（全屏）或
快速验证是否是高度问题
若因浮动导致塌陷，用
或
清除浮动
；若用 Flex/Grid，确保父容器有
或
且子项能撑开空间
调试顺序建议：从网络层到渲染层逐级验证
别一上来就调
，多数时候问题不在那里。真实排错链路是：
Network 查图片 404？→ 修路径
图片请求成功但没显示？→ 检查元素尺寸（
/
）、
、
、
、z-index 覆盖
尺寸正常但图没按预期缩放？→ 看
是否被简写覆盖，是否用了不支持的值（如
是非法的）
多个背景图叠加时，注意逗号分隔顺序：第一个声明的图在最上层，
也要按相同顺序配对，否则错位
复杂布局中，
行为依赖于盒模型、层叠上下文和渲染时机，路径和尺寸只是入口，真正卡住的地方往往在容器自身的渲染状态。
background-imagebackground-image: url(...)body { background-image: url(../images/bg.jpg); }../images/bg.jpgimagesbg.jpgbackground-image/assets/bg.jpghttps://example.com/app/background-sizebackground-sizebackground-size: coverbackground-size: 100% 100%height: autobackgroundbackground: #fff url(bg.jpg) no-repeat;background-sizeautobackground: #fff url(bg.jpg) no-repeat / cover;background-sizecontaincoverbackground-size: 100% coverdisplay: blockbackground-imagebackground-sizeheight0pxborder: 1px solid redmin-height: 100vhheight: 600pxoverflow: hidden::afterdisplay: flexdisplay: gridbackground-sizewidthheightdisplayvisibilityopacitybackground-sizebackground-size: 100% auto 50%background-sizebackground