background-position: center 仅控制背景图定位，不控制缩放；需配合 background-size: cover 和明确容器高度（如100dvh）才能在手机上完整显示大图，避免裁剪或留白。
background-position: center 为什么大图在手机上还是被裁掉
因为 background-position: center 只控制“图往哪摆”，不控制“图怎么缩”。图比容器宽高时，浏览器默认按原尺寸铺满容器（background-size: auto），超出部分直接裁剪——哪怕你居中了，边缘照样切掉。
- 常见错误现象：
background-image在 iPhone 上只显示中间一截，上下/左右黑边或内容被切 - 真正起作用的是
background-size，不是background-position -
background-position: center必须和background-size配合使用才有意义
移动端背景图完整适配的三步写法
用最简、兼容性最好的组合：居中 + 等比缩放 + 不拉伸不变形。核心就是这三行：
background-image: url(./hero.jpg); background-size: cover; background-position: center;
-
cover：等比缩放图片，确保完全覆盖容器，可能裁边，但不会留白 -
contain：等比缩放图片，确保全部可见，但可能留白（不适合全屏大图） - 别写
100% 100%或auto，会拉伸变形或显示不全 - 必须加
background-repeat: no-repeat，否则小图会平铺（尤其开发时用占位图容易忽略）
iPhone Safari 下 background-size: cover 失效？检查 viewport 和 height
真机上图没铺满，大概率不是 CSS 写错，而是容器本身没高度。Safari 对 min-height: 100vh 渲染不稳定（地址栏收放导致 vh 动态变化），造成背景图“没地方铺”。
- 错误写法：
height: 100vh或min-height: 100vh—— iOS Safari 里实际高度可能只有 60vh - 稳妥做法：给父容器设明确高度，比如
height: 100dvh（现代 Safari 支持）或 JS 动态设style.height = window.innerHeight + 'px' - 检查 computed styles：用 Safari 开发者工具看元素最终 height 是多少，不是看写了什么
- 如果用了 flex 布局，确认父级没漏写
height: 100%或flex: 1
高清屏下背景图模糊？别只换 src，要配 background-size 和像素比
Retina 屏需要 2x 图，但光换图不够——如果 CSS 还按 1x 尺寸渲染，浏览器会把 2x 图强行压缩到 1x 区域，结果更糊。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
background-size显式声明逻辑尺寸，比如background-size: 100% 100%表示“按容器宽高显示”，再配 2x 图源 - 更可靠方案：用媒体查询区分像素比：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hero { background-image: url(./hero@2x.jpg); } } - 避免用
background-size: contain配 2x 图——它会把高分辨率图进一步缩小，细节损失严重
