background-size: cover 未生效主因是父容器无明确高度，需设 html、body{height:100%}或元素自身用100vh/具体值；移动端safari兼容差，建议伪元素或img+object-fit替代。
background-size: cover 为什么没生效
常见原因是父容器没有明确高度，html 和 body 默认高度为 0，导致背景图“无处可铺”。必须显式设置高度才能让 cover 正常计算缩放比例。
html, body { height: 100%; margin: 0; }- 如果用在某个
div上，该div也需有确定高度（如height: 100vh或具体像素值） - 避免同时设置
background-attachment: fixed—— 它会破坏视口跟随行为，在移动端尤其容易导致错位或卡顿
全屏响应式背景的最小可靠写法
以下 CSS 能确保背景图始终覆盖整个可视区域，且随窗口缩放自动重算：
body {
margin: 0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll;
min-height: 100vh;
}关键点：min-height: 100vh 比 height: 100vh 更安全——内容超长时不会遮挡底部；background-attachment: scroll 是默认值，显式写出可避免继承干扰。
移动端 Safari 的 background-size 兼容陷阱
iOS 15 之前版本对 cover 在 body 上的支持不稳定，常出现拉伸变形或留白。绕过方法：
立即学习“前端免费学习笔记（深入）”；
- 改用
background-size: 100% 100%（强制拉满，但可能裁剪） - 或用伪元素替代：给
body::before设绝对定位 +z-index: -1，再设background-size: cover - 避免在
body上直接设background同时又用 JS 动态换图——Safari 可能不触发重绘
需要保持宽高比时用 object-fit 思路模拟
如果背景图内容重要（比如含文字、Logo），cover 的裁剪不可接受，可用 img 标签配合 object-fit 替代纯 CSS 背景：
<div class="bg-container"> @@##@@ </div>
.bg-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: -1;
}
.bg-container img {
width: 100%; height: 100%;
object-fit: cover; /* 或 contain */
object-position: center;
}这种方案更可控，也能响应 picture 和 srcset，但需注意 fixed 定位在 iOS 滚动时可能闪烁——加 transform: translateZ(0) 可缓解。
实际项目里最常出问题的不是写法本身，而是忘了检查图片是否真的加载成功，或者路径拼错导致 fallback 成纯色背景——建议在 DevTools 的 Network 面板里确认 bg.jpg 状态码是 200。
