最常见的原因是父容器无高度，需显式设置html、body{height:100%;margin:0;}，子元素也需明确高度如min-height:100vh；cover裁剪保满，contain完整保形；ios safari中建议用min-height:100%替代100vh；fallback可用多层background-image或纯色兜底。
background-size: cover 为什么没生效
最常见的原因是父容器没高度，background-image 默认只在内容撑开的区域内渲染。浏览器窗口本身不是“有高度的容器”，html 和 body 默认高度是 auto，不会自动拉满视口。
必须显式给 html 和 body 设为 100% 高度，再让目标元素（比如 body 或某个 div）应用背景图：
html, body { height: 100%; margin: 0; }body { background-image: url("bg.jpg"); background-size: cover; background-repeat: no-repeat; }- 如果用在子元素上（如
.hero），它也得有明确高度，比如min-height: 100vh;
cover 和 contain 的实际区别在哪
cover 是裁剪保满：等比缩放图片直到完全覆盖容器，可能切掉上下或左右边缘；contain 是完整保形：等比缩放直到整张图完全可见，留黑边是常态。
做全屏背景时几乎总是选 cover，但要注意关键视觉区域（比如人脸、LOGO）别被裁掉。可以用 background-position 调整锚点：
立即学习“前端免费学习笔记（深入）”；
-
background-position: center center;（默认，居中裁剪） -
background-position: top left;（左上角对齐，右边/下边可能被裁） -
background-position: 20% 30%;（X 偏移 20%，Y 偏移 30%，更精细控制）
移动端 Safari 拉拽时背景图错位
iOS Safari 在页面滚动或手势拉拽时，会临时改变视口计算方式，导致 100vh 不稳定，进而让 background-size: cover 表现异常——常见于页面底部突然露出白边或背景跳动。
解决办法不是硬扛，而是绕开 vh 单位：
- 用
min-height: 100%;配合html, body { height: 100%; }更可靠 - 避免在
body上直接设背景，改用一个全屏div作为背景层：<div class="bg-layer"></div>，再用position: fixed; top: 0; left: 0; width: 100%; height: 100%; - 加
background-attachment: fixed;会让背景随视口固定，但注意这在 iOS 上可能触发性能警告，慎用
图片加载失败时如何 fallback
background-image 没内置 fallback 机制，路径错、404、跨域都会静默失败，最终显示空白或底色。
稳妥做法是双保险：
- 先设一个纯色或渐变作为兜底：
background-color: #2c3e50;或background: linear-gradient(135deg, #2c3e50, #1a252f); - 再叠一层图片：
background-image: linear-gradient(135deg, #2c3e50, #1a252f), url("bg.jpg");—— 多个background-image值用逗号分隔，前面的在上层，但只有最底下那层支持cover缩放 - 真要动态检测加载失败？得用 JS +
Image对象监听onerror，再切换 class，成本高，一般项目不值得
html, body { height: 100%; margin: 0; } 这一行，其他都好调，就它一漏，整个背景图就缩在顶部一小条里。 
