background-size: cover本身正确但单独无效，因其仅等比缩放填满容器并裁剪溢出部分；必须配合viewport标签、html/body高度重置、min-height: 100dvh、background-position手动锚定关键内容及image-set适配高清屏才能真正生效。
background-size: cover 是正确解法，但单独写它没用——90% 的“裁掉关键内容”“留黑边”“只显示一截”，问题不在 cover 本身，而在它没被放在正确的上下文中运行。
为什么 background-size: cover 在 iPhone 上还是切人脸？
因为 cover 的行为是确定的：等比缩放图片，直到「短边」刚好填满容器。当手机竖屏（比如 375×812）和海报图（比如 1920×1080，宽高比 ≈ 16:9）差异大时，必然多裁。这不是 bug，是设计逻辑。
常见错误现象：background-position: center 写了，但人物眼睛/Logo 还是被切掉；横屏时左右留白；真机上图只占半屏。
- 别指望
cover自动“聪明裁剪”，它只管比例和覆盖，不管构图 - 必须配合
background-position手动锚定主体，例如人物偏上就用background-position: center top，不是默认的center center - 如果关键内容必须全见，
cover不适合，该换contain+ 明确容器aspect-ratio
移动端全屏背景必须满足的三个硬性条件
缺一不可，否则 cover 根本没地方生效。
-
必须存在，否则 Safari 会按桌面模式渲染 -
html, body { height: 100%; margin: 0; padding: 0; }必须写，否则min-height: 100vh会塌陷 - 目标元素必须有明确高度支撑，推荐
min-height: 100dvh（不是100vh），避免 iOS 地址栏收放导致视口高度跳变
高清屏下 background-size: cover 图片模糊怎么办？
不是 CSS 没生效，是浏览器加载了低分辨率图，然后靠 cover 拉伸放大，糊了。
- 别只放一张
bg.jpg，哪怕本地有bg@2x.jpg，浏览器也不会自动选 - 优先用
image-set()：background-image: image-set("bg.jpg" 1x, "bg@2x.jpg" 2x); - 降级方案用媒体查询：
@media (-webkit-min-device-pixel-ratio: 2) { .hero { background-image: url("bg@2x.jpg"); } } - 确认
@2x图是物理尺寸翻倍（如原图 1200×600，@2x 必须是 2400×1200），不是 PS 放大
background-size: cover 和 contain 怎么选？
不是技术偏好问题，是视觉需求决定的。
-
cover：影视 banner、氛围型大图、允许裁边的场景——用它，但务必配background-position控制裁哪 -
contain：Logo、产品图、文字+图标组合图等“不能丢内容”的场景——它会完整显示，但大概率留白 - 绝对别用
100% 100%或auto：前者拉伸变形，后者不缩放，小屏直接显示左上角一隅
真正难的不是写对那三行 CSS，而是得先判断这张图在不同设备上“什么能裁、什么不能动”，再反推该用 cover 还是 contain，以及 background-position 锚点该设在哪——这个决策没法自动化，得人眼盯住设计稿反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
