cover等比缩放确保覆盖容器但可能裁剪，contain等比缩放确保完整显示但可能留白；flex容器中背景不显常因高度坍缩为0；移动端禁用auto，优先cover+center；清晰缩放首选SVG或image-set()。
background-size: cover 和 contain 的区别在哪
直接决定背景图是否“填满”或“完整显示”的是 background-size 的取值，不是图片原始尺寸本身。很多人试了 cover 还是留白，其实是没配对 background-repeat 或忽略了容器尺寸限制。
-
cover：等比缩放图片，确保完全覆盖容器，**可能裁剪边缘**；适合全屏 Banner、卡片封面 -
contain：等比缩放图片，确保整张图完整可见，**可能留白**；适合 Logo、图标类背景 - 如果容器宽高为
auto或未设固定尺寸，cover也可能失效——浏览器不知道“覆盖谁”
为什么 background-image 在 flex 容器里不显示
常见于把 div 设为 display: flex 后加背景图，结果图不见了。根本原因是：flex 容器若子元素无内容、无显式宽高，其自身高度会坍缩为 0，背景图自然无处渲染。
- 检查父容器是否设置了
height或min-height（比如min-height: 100vh） - 避免依赖子元素撑开高度，除非子元素有
flex: 1或固定height - 用浏览器开发者工具选中元素，看 computed 面板里
height是否为0px
适配移动端时 background-size 写 auto 会出问题
background-size: auto 表示按图片原始像素渲染，不做任何缩放。在高 DPR 屏幕（如 iPhone Retina）上，1px CSS 像素可能对应 2~3 物理像素，导致背景图模糊或尺寸错乱。
- 永远不要在响应式场景下单独用
auto，尤其搭配background-position: center时更易偏移 - 优先用
cover+background-position: center组合，再配合媒体查询微调 - 若需精确控制，可用
background-size: 100% 100%（拉伸变形）或100% auto（等比铺满宽度）
如何让背景图随容器缩放但保持清晰
核心矛盾是：缩放 SVG 或高清 PNG 可能糊，而小图放大又失真。真正可控的解法是换资源类型或加兜底逻辑。
立即学习“前端免费学习笔记（深入）”；
- 优先用
.svg作为背景图：background-image: url("bg.svg")，矢量图缩放无损 - 若必须用位图，提供 2x 版本并用
image-set()（注意兼容性）：
background-image: image-set( "bg.jpg" 1x, "bg@2x.jpg" 2x );
- 不支持
image-set()的老浏览器，用@media (-webkit-min-device-pixel-ratio: 2)单独覆盖背景图路径
