background-size: cover 失效主因是 body 默认高度由内容撑开而非视口，需 html 和 body 同设 height: 100%、margin: 0，并将背景设在 html 上；cover 等比缩放至少一边填满，裁剪取决于宽高比差异；移动端禁用 background-attachment: fixed，推荐用 html 背景+scroll 或 fixed 定位 img 替代；完整可靠写法需三条件：背景在 html、html/body 均设 height: 100%、显式声明 no-repeat。
为什么 background-size: cover 单独写没反应
根本原因是 body 默认高度由内容撑开，不是视口高度。浏览器按实际高度（比如只有 20px）缩放图片，cover 看起来像失效了。
必须让容器真正占满视口：
-
html和body都要显式设height: 100%，且margin: 0 - 背景推荐设在
html上，避免滚动条遮挡或内容溢出干扰 - 如果用
section或其他元素做全屏区域，得用min-height: 100vh，不能只靠height: 100%
background-size: cover 和 contain 的行为差异
cover 是「等比缩放，至少一边填满，另一边可能溢出」；contain 是「等比缩放，最多一边贴边，另一边必留白」。全屏背景几乎总是选 cover，但要注意裁剪逻辑：
- 裁哪边取决于图片宽高比 vs 容器宽高比谁更「窄」——比如竖图配横屏，上下被切；横图配 iPhone Pro 19.5:9，左右被切
- 人脸、关键按钮被切掉不是 bug，是
cover的确定性行为 - 必须写
background-position: center center，别依赖默认值；某些旧安卓内核对50% 50%解析不准
移动端和 iOS Safari 的真实坑点
background-attachment: fixed 在 iOS Safari 上会导致滑动卡顿，尤其长页面+大图时。这不是兼容性问题，是渲染性能瓶颈。
替代方案更可靠：
- 去掉
fixed，用html背景 +background-attachment: scroll（背景随内容滚动，但视觉上仍是全屏） - 真要固定效果，用
position: fixed+z-index叠一层<img>，再配object-fit: cover和min-width: 100vw; min-height: 100vh -
image-set()比单纯一张大图更合理：background-image: image-set(url(bg-1200.jpg) 1x, url(bg-2400.jpg) 2x)，避免低端机下 4K 图白下
完整可用的最小可靠写法
下面这段能跨现代浏览器稳定工作，不含冗余前缀（-webkit- 等已非必需）：
html {
background: url('bg.jpg') no-repeat center center;
background-size: cover;
height: 100%;
}
body {
margin: 0;
height: 100%;
}
注意三个硬性条件缺一不可：背景在 html、html 和 body 同时设 height: 100%、no-repeat 必须显式声明。漏掉任意一个，都可能在 Safari 或某些安卓 WebView 里出偏移、重复或空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
