background-size: cover 不保证内容居中可见，它仅等比缩放、填满容器、居中裁剪；真正控制可见区域的是 background-position，需结合安全区与设备差异微调。
background-size: cover 本身不保证内容居中可见
很多人以为 cover 就是“居中铺满”，其实它只做三件事：等比缩放 → 填满容器 → 居中裁剪。关键在“居中裁剪”——裁的是图片的中心区域，但如果你的图片里人脸、Logo、按钮压在顶部或底部，那它们大概率被切掉。
真正起居中作用的是 background-position，不是 cover。默认值确实是 50% 50%（即居中），但这个“居中”是相对于整张图的几何中心，不是你设计稿里的视觉重心。
- 设计师给的图常把标题放在上1/3，人脸在中下部——这时
background-position: center center反而容易切掉脸 - 用
background-position: center top或50% 20%能把关键区域往上拉进可视区 - 绝对不要写死像素值（如
10px 20px），响应式下会完全失效
为什么写了 cover 却看起来没居中？检查这三处硬性条件
cover 是个“老实人”，它只在有高度的盒子里干活。移动端最常见的情况是：CSS 写对了，但背景图只显示一截，或者横屏留白、竖屏裁头——根本不是属性问题，而是底层结构没搭好。
-
html和body必须同时设height: 100%+margin: 0+padding: 0，否则高度塌陷，cover没容器可填 - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，漏掉它，浏览器按桌面宽度（比如 980px）渲染，cover的裁剪逻辑全乱 - 容器要显式撑开高度，比如用
min-height: 100vh；100vh在 iOS Safari 地址栏显隐时会跳变，100dvh更稳（iOS 16+ 支持），记得加 fallback
background-position 微调的关键经验
别指望一次调准，不同设备宽高比差异大（iPhone 14 Pro 是 19.5:9，安卓很多是 20:9 或 18:9），同一张图在不同手机上裁的位置可能差一大截。重点看安全区和构图习惯。
立即学习“前端免费学习笔记（深入）”；
- 把关键内容（人脸、主标题、操作按钮）控制在图片中心 60% 区域内，这是最稳妥的“安全区”
- 人物类、带文字的图，优先试
background-position: 50% 30%（垂直方向上移，留出头顶） - 横幅式构图（风景、产品平铺）、顶部有渐变或留白的图，
center top比center center更可靠 - 避免混用
cover和contain，像background-size: cover, contain这种写法浏览器只认第一个，第二个直接忽略
移动端 Safari 的几个隐藏坑
iOS Safari 对背景图的渲染有自己的一套逻辑，有些行为在 Chrome 里正常，到真机上就偏移、闪烁甚至消失。
-
background-attachment: fixed在 iOS 上极不可靠，滚动时背景错位或消失，一律换成scroll - 如果容器有圆角（
border-radius），加一句background-origin: border-box，防止背景定位被圆角截断 - 用
transform: translateZ(0)强制硬件加速，能缓解部分安卓 WebView 下contain渲染延迟的问题 - 动态设置背景图（比如 React/Vue 中通过
style绑定）时，确保src是有效路径，相对路径在异步加载组件里容易 404，DevTools 的 Network 标签页要盯紧
cover 决定的。 
