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