background-size: cover 填满容器但会裁剪图片，contain 保证完整但留白，100% 100% 强制拉伸变形；三者需配合 background-repeat、background-position 及容器尺寸才生效。
background-size: cover 会裁剪图片，但能填满容器
当你需要背景图严丝合缝地铺满整个元素（比如全屏 Banner、登录页背景），background-size: cover 是最常用的选择。它会让图片等比缩放，直到**至少有一边完全贴合容器边缘**，另一边则可能溢出被裁剪。
常见错误是以为 cover 能“完美显示全图”——实际它优先保证无空白，不保证完整。如果原图宽高比和容器不一致（比如用竖版图配横版 div），顶部/底部或左右就会被切掉。
-
background-position: center必须配合使用，否则裁剪区域不可控 - 避免在小容器里用大图 +
cover，可能因缩放过度导致模糊（尤其 DPR > 1 设备） - 不要和
background-repeat: repeat混用——cover本身已隐含单次渲染，重复会破坏效果
background-size: contain 保证图片完整，但可能留白
适用于图标、logo、卡片内嵌图等**必须完整可见**的场景。background-size: contain 会让图片等比缩放到“刚好全部放进容器”，宽或高之一会贴边，另一个方向留下空白。
典型误用是把它当“居中缩放”万能解——它不控制留白位置，只管缩放逻辑。留白出现在哪，取决于 background-position。
立即学习“前端免费学习笔记（深入）”；
- 务必搭配
background-repeat: no-repeat，否则留白区会被重复平铺（除非你真想要） - 若容器宽高动态变化（如响应式侧边栏），
contain的留白大小也会变，需预估最小可用空间 - 对 SVG 背景图效果更稳定，因为矢量图缩放无损；位图在极端缩小时可能发虚
background-size: 100% 100% 会拉伸变形，慎用
这个值强制把背景图拉到容器宽高，**完全忽略原始宽高比**。按钮图标、固定尺寸卡片里偶尔用得上，但绝大多数场景下会导致图片胖瘦失真。
设计稿给的是 24×24px 图标，你写 width: 3em; height: 2em; 再配 background-size: 100% 100%？那图标一定被压扁。
- 仅在明确要求“像素级填充”且图源宽高比=容器宽高比时才安全
- 响应式中绝对避免：容器
width变，height不变，变形立刻出现 - 替代方案：用
background-size: auto 100%或100% auto，至少保一边比例
用 background-size 配合其他属性才能生效
background-size 单独写没用。它依赖背景图已加载、容器有明确尺寸、且未被其他背景相关属性干扰。
最容易漏的是 background-repeat 和 background-position ——前者默认 repeat，后者默认 0 0，都会让 size 效果失效或错位。
- 固定图标：必须写
background-repeat: no-repeat+background-position: center - 全屏背景：加
min-height: 100vh，否则容器高度塌陷，cover没作用对象 - 父容器无宽高（如 flex 子项未设
flex-basis），background-size: 100%会按 0 计算，图直接消失
真正麻烦的不是选哪个值，而是搞清“图要完整”还是“容器要填满”——这两个目标天然冲突，cover 和 contain 各守一边，没中间态。选错就等于接受对应副作用，没法靠调参数绕过去。
