background-size: cover 会等比缩放并居中裁剪背景图以填满容器，不保证关键内容可见；移动端因屏幕宽高比差异大（如iPhone 14 Pro为19.5:9），常裁切人脸或按钮，需配合 background-position: center center 及安全区构图规避。
background-size: cover能让背景图等比缩放填满容器，但它不是“智能居中裁剪”，而是机械地按宽高比缩放后居中——所以关键内容被切掉，不是 bug，是设计行为。
为什么 background-size: cover 在移动端总切掉人脸/按钮
核心原因是：cover 只保证“填满”，不保证“内容可见”。移动端屏幕宽高比差异大（iPhone 14 Pro 是 19.5:9，部分安卓屏接近 20:9 或更窄），而你的背景图通常是 16:9 或 4:3。当容器和图片宽高比不一致时，必然裁剪——裁哪边，取决于谁更“窄”。
- 竖屏手机 + 横向构图图 → 顶部/底部被砍
- 横屏切换 + 竖向构图图 → 左右被砍
- 没加
→ 浏览器用 980px 宽度渲染，cover实际作用在伪宽屏上，裁剪逻辑彻底错乱
background-position: center 必须显式写，不能依赖默认
虽然 CSS 规范里 background-position 默认值是 0% 0%，但某些旧版 iOS Safari 和部分安卓 WebView 会把“未声明”当作左上角锚点，尤其在 background-attachment: fixed 场景下更不稳定。
- 始终写成
background-position: center 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 叠加一层
图片本身和路径的隐藏陷阱
再好的 CSS 也救不了源头问题：
- 别用超宽图（如 3840×1080）做移动端全屏背景——它在 iPhone 竖屏下会裁掉近 70% 高度，连安全区都保不住
- 确保图片中心 60% 区域是核心内容（人脸、Logo、主文案），这是跨设备最稳妥的“安全区”
- 路径写成
url(./images/bg.jpg)而非url(images/bg.jpg)，相对路径少一层404风险 - 动态加载背景图时（如 JS 设置
element.style.backgroundImage），路径必须带引号，否则空格或括号会解析失败
真正麻烦的从来不是怎么写 cover，而是你手里的那张图，有没有为“被裁”做好准备。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
