根本原因是html和body未撑满视口或容器高度塌陷；须设html, body { height: 100%; margin: 0; padding: 0; }，再用background-size: cover配合background-position微调构图，优先选center top等语义明确值，并用aspect-ratio锁定比例。
全屏背景图不铺满、被裁切、小屏变形，根本原因不是background-size写错了，而是html和body没撑开，或容器高度塌陷。直接上有效解法。
为什么background-size: cover在body上无效？
因为body默认高度由内容决定，不是视口高度。哪怕写了height: 100%，若父级html没设高，它照样塌陷。
- 必须同时设置
html, body { height: 100%; margin: 0; padding: 0; } -
body加background-attachment: fixed时，部分安卓 WebView 会触发渲染异常，慎用 - 若页面有滚动条且希望背景随动，去掉
fixed，但要确保body高度 ≥ 视口（可用min-height: 100vh兜底）
如何让cover不乱裁人物/Logo？
cover只保证填满+等比缩放，不管构图。关键靠background-position微调视觉重心，而不是换别的值。
- 默认
center center常把人脸切掉，改用center top或50% 20%把主体往上提 - 移动端竖屏下人像易被裁，配合媒体查询调整：
@media (max-width: 768px) { background-position: center 10%; } - 别依赖
background-position: 50% 50%——百分比是按容器算的，不是图片；用center top语义更稳
小屏下留白 or 强行拉伸？选contain还是cover？
这不是二选一，是目标驱动：cover适合氛围型全屏图（如 Banner），contain适合信息型图（如带文字的 Logo 图）。
立即学习“前端免费学习笔记（深入）”；
-
background-size: contain一定完整显示，但留白不可控；若容器宽高比固定，可加background-repeat: no-repeat+background-position: center居中留白 -
background-size: 100% 100%会失真，仅适用于纯色渐变、噪点图等无比例要求的素材 - 真正平衡方案：用
aspect-ratio锁容器比例，再配cover，比如section.hero { aspect-ratio: 16 / 9; background-size: cover; }
高清屏加载模糊？image-set()比媒体查询更轻量
CSS 背景图不支持srcset，但image-set()能按设备像素比（DPR）自动选图，不发多余请求。
- 写法：
background-image: image-set( url(img.jpg) 1x, url(img@2x.jpg) 2x ); - 必须加 fallback：
background-image: url(img-fallback.jpg), image-set(...); - 不支持按视口宽度切换（如
min-width: 768px），这类需求只能用媒体查询多写几遍background-image - 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+；旧浏览器会忽略
image-set，走 fallback
最易被忽略的一点：背景图是否“响应”，70% 取决于容器尺寸是否稳定。aspect-ratio现在已是主流方案，但若需兼容老安卓 WebView，padding-top 技巧仍得备着——它不是过时，是兜底逻辑不同。
