background-size: cover 是最稳妥的选择，它等比缩放背景图确保铺满容器且不变形，需配合 background-position: center center 和 background-repeat: no-repeat，并设置 html, body { height: 100%; } 防止高度塌陷。
background-size: cover 是最稳妥的选择
绝大多数情况下，background-size: cover 能让背景图在任意缩放级别（包括浏览器手动缩放、系统dpi缩放、不同设备像素比）下保持铺满且不拉伸变形。它会等比缩放图片，确保容器区域被完全覆盖，多余部分自动裁剪。
常见错误现象：用 background-size: 100% 100% —— 强制拉伸宽高，导致图片扭曲；或只设 background-size: contain —— 留白严重，尤其在高缩放比（如125%、150%）时顶部/底部大片空白。
- 必须配合
background-position: center center，否则裁剪位置偏移，视觉失衡 - 需要声明
background-repeat: no-repeat，否则在某些缩放临界点可能意外触发平铺 - 旧版IE（≤10）不支持
cover，需用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader回退（仅限内网或兼容性强制场景）
body 和 html 高度必须显式设为 100%
如果背景图设在 body 上却只显示顶部一小条，大概率是高度塌陷了——body 默认高度由内容撑开，不是视口高度。缩放时内容高度变化，背景就“跟不上”。
实操建议：在 CSS 开头加这两行，缺一不可
html, body { height: 100%; margin: 0; padding: 0; }
注意：height: 100% 是相对父容器计算的，所以 html 必须先拿到视口高度，body 才能继承。漏掉 html 这一层，body 的 100% 就没意义。
避免用 vw/vh 直接控制背景图尺寸
有人试过 background-size: 100vw 100vh，看似“全屏”，但实际在缩放时会出问题：浏览器缩放改变的是渲染像素，而 vw/vh 是基于布局视口的逻辑单位，两者响应节奏不一致，容易造成背景图轻微抖动或错位。
更关键的是，100vh 在移动端 Safari 中常因地址栏显隐导致高度跳变，缩放叠加后更不稳定。
- 坚持用
cover或contain，它们是专为响应式背景设计的值 - 若需精确控制某张图的缩放锚点，可用
background-size: auto 100vh+background-position: top center，但仅限明确需要顶部对齐的 Banner 场景
图片本身分辨率和加载时机影响缩放观感
缩放级别高（比如 175%）时，如果背景图原始分辨率不足，会出现明显模糊——这不是 CSS 问题，而是素材问题。浏览器在缩放时会插值重绘，低清图经放大后像素感极强。
另一个隐形坑：背景图是 CSS 加载的，不参与 HTML 渲染阻塞。如果页面首屏依赖背景图传达关键信息，而图又较大，缩放状态下加载延迟更明显，用户会先看到空白色块。
- 优先使用 WebP 格式，同等质量下体积小 30%+，加快缩放态下的加载速度
- 对关键背景图，可加
loading="eager"（虽对 CSS 背景无效，但提醒你：考虑是否该改用<img>+position: fixed方案） - 不要指望
image-set()在所有浏览器中生效（Safari 支持差），高 DPR 设备上仍建议提供 2x 版本并用媒体查询切换
