background-size: cover 等比缩放图片完全覆盖容器并裁剪多余部分，保持原图比例；100% 100% 强制拉伸填满宽高，易导致变形。
background-size: cover 与 background-size: 100% 100% 的区别
想让背景图铺满整个元素，最常被误用的是 background-size: 100% 100%。它会强制拉伸图片填满宽高，但极易导致变形——尤其当图片宽高比和容器不一致时。
background-size: cover 才是真正“铺满且不失真”的方案：它等比缩放图片，确保完全覆盖容器，多余部分会被裁剪。
- 用
cover：适合强调视觉冲击、允许边缘裁剪的场景（如 banner 区） - 用
100% 100%：仅适用于你明确控制图片比例，且能接受拉伸变形的情况 - 注意：两者都需配合
background-repeat: no-repeat，否则重复平铺会破坏铺满效果
必须设置 background-attachment 和 background-position 吗？
不是必须，但不设容易出意料之外的效果。默认 background-attachment: scroll 是滚动跟随，而 background-position 默认是 0% 0%（左上角对齐），可能导致图片只显示一角。
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
body {
background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; /* 视差滚动效果，可选 */
}-
background-position: center center确保图片居中，避免偏移 -
background-attachment: fixed让背景图随视口固定，滚动时有沉浸感；但移动端兼容性略差，iOS Safari 可能失效 - 若要兼容性优先，去掉
fixed，保留scroll即可
全屏铺满 body 时为什么底部留白？
常见现象：图片明明设了 cover，但页面滚动到底部出现白边。根本原因是 body 默认有 margin，且未设高度约束。
解决方法是重置基础样式并显式撑满视口：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: url('bg.jpg') no-repeat center center fixed;
background-size: cover;
}-
html, body { height: 100% }是关键，否则body高度由内容撑开，无法覆盖整个视口 - 单独设
body { min-height: 100vh }也能生效，但要注意vh在 iOS Safari 中存在键盘弹出时视口高度跳变的问题 - 如果页面内容超出一屏，
cover依然有效——它始终作用于当前可见区域的背景渲染
响应式下 background-size: cover 不生效？
不是不生效，而是图片源分辨率不足或加载时机问题。比如在高 DPR 设备（如 Retina 屏）上，小尺寸背景图会被像素化放大，看起来模糊甚至像没铺满。
- 提供至少 2x 分辨率图，或使用
image-set()（支持度有限） - 更稳妥的做法：用媒体查询切换不同尺寸背景图：
@media (min-resolution: 2dppx) - 避免用
<img>标签模拟背景图——它无法实现cover的自动裁剪逻辑，且语义错误 - 动态换背景时（如 JS 切换），记得触发重绘：修改
backgroundImage后加一句el.style.backgroundSize = 'cover'，防止浏览器缓存旧渲染状态
实际铺满的关键不在“怎么写”，而在是否同时控制了容器尺寸、重置了默认边距、选对了缩放模式——漏掉任意一环，都会让 cover 表现异常。
