background-size: cover需配合background-position和容器宽高比才能确保背景图裁剪一致；cover仅保证填满容器，不保证主体可见，须用background-position锚定焦点，并通过aspect-ratio或padding-top固定容器比例。
用 background-size: cover 是解决背景图在不同屏幕裁剪不一致的最常用、最有效方法，但光写这一句往往还不够——关键在于配合 background-position 控制“裁哪一部分”，再确保容器有明确尺寸和宽高比，才能真正实现统一视觉效果。
为什么 background-size: cover 还会显示奇怪？
因为 cover 的逻辑是：等比缩放图片，直到**完全覆盖容器**，必要时会裁剪边缘。它不保证“显示主体居中”或“保留关键内容”，只保证“填满”。如果图片构图偏、容器宽高比多变（比如手机竖屏 vs 平板横屏），裁剪位置就不可控。
必须搭配 background-position 精准锚定焦点
默认 background-position: 50% 50%（即居中），多数情况够用；但如果人物在左侧、logo在右上角，就得手动调整：
-
想突出人脸？ 写
background-position: center 30%（垂直方向上移，把脸留在可见区） -
Logo 在右上？ 用
background-position: right top或95% 5% - 避免文字被裁？ 先在设计稿里标出安全区域（如上下留15%），再反推 position 值
容器本身要“守规矩”：设宽高比 + 避免高度塌陷
如果父容器没有明确高度（比如仅靠内容撑开），cover 就可能压缩变形或显示不全：
立即学习“前端免费学习笔记（深入）”；
- 用
aspect-ratio: 16 / 9（现代浏览器）或padding-top: 56.25%（兼容方案）固定宽高比 - 避免给背景容器设
height: auto或不设高度 - 移动端慎用
vh（如height: 100vh），Safari 地址栏收放会导致高度跳变
进阶技巧：响应式 fallback + object-fit 思路迁移
对特别重要的背景图（如首页大图），可结合媒体查询微调：
- 小屏用
background-position: center bottom，保留下半部分（常含CTA按钮） - 大屏用
center center，兼顾整体构图 - 极端情况考虑改用
object-fit: cover，语义更清、控制更细（需额外 HTML）
基本上就这些——cover 不是万能开关，而是“缩放+定位+容器约束”三者配合的结果。调一次 position，测三台设备，比盲目加 hack 更可靠。
