background-size: cover 会等比缩放填满容器但不保证关键内容可见，因宽高比不一致必然裁剪，移动端需配合 background-position: center center 等精细控制。
background-size: cover 能让背景图等比缩放填满容器，但它不保证关键内容可见——这是设计行为，不是 bug。
为什么 background-size: cover 在手机上总切掉人脸或按钮
核心矛盾在于：cover 只管“填满”，不管“看得见”。移动端屏幕宽高比差异大（比如 iPhone 14 Pro 是 19.5:9，部分安卓接近 20:9），而你的背景图大概率是 16:9 或 4:3。两者宽高比不一致时，必然裁剪。
- 竖屏 + 横向构图图 → 顶部/底部被砍
- 横屏切换 + 竖向构图图 → 左右被砍
- 漏写
<meta name="viewport" content="width=device-width, initial-scale=1">→ 浏览器用 980px 渲染，cover 实际作用在伪宽屏上，裁剪逻辑彻底错乱
background-position: center 必须显式写两个值
CSS 规范里默认值确实是 0% 0%，但旧版 iOS Safari 和部分安卓 WebView 对“未声明”的处理不稳定，尤其在 background-attachment: fixed 场景下，容易回退到左上角锚点。
- 始终写成
background-position: center center，比单写center更明确 - 如果人物视线朝右，可用
background-position: right 20% center微调，避免脸被裁 - 别用
50% 50%替代center center——少数安卓内核对百分比解析有偏差
三种常见写法的实际差异和坑点
网上流传的三类全屏背景写法，表面相似，底层行为完全不同：
立即学习“前端免费学习笔记（深入）”；
-
body { background-size: cover; height: 100vh; }：最常用，但若页面内容超一屏，滚动时背景会随body一起动（除非加background-attachment: fixed） -
div.full-bg { background-size: cover; min-height: 100vh; }：推荐。用独立容器包裹，避免污染body其他样式；min-height比height更安全，防止内容撑高后背景被截断 -
background-size: 100% 100%：强制拉伸，必变形。仅适合纯装饰性、无关键元素的图（如渐变纹理）
额外注意：background-attachment: fixed 在 iOS Safari 上有性能问题，滑动可能卡顿；如需固定效果，建议用 position: fixed + z-index 叠加一层 <img alt="如何让CSS背景图自适应窗口大小_使用background-size: cover" > 替代。
