cover等比缩放并裁剪以填满容器，contain等比缩放确保整图可见但可能留白；前者适用于全屏banner，后者适合logo等需完整显示的场景。
background-size: cover 和 contain 的区别在哪
关键看你要的是“填满容器”还是“完整显示图片”。cover 会等比缩放并裁剪，确保容器被完全覆盖；contain 则等比缩放至整张图完全可见，可能留白。
响应式背景图几乎都用 cover，比如首页大图、卡片背景。但做图标或徽标类背景时，contain 更安全，避免关键内容被切掉。
-
cover：适合全屏 banner、视差滚动背景 -
contain：适合 logo、小图标、需要精确对齐的装饰性背景 - 两者都依赖
background-repeat: no-repeat才能生效
必须设置 background-position 才能控制裁剪区域
用 cover 时，浏览器默认从图片中心裁剪。如果图中主体偏左（比如人像看向右侧），不调位置会导致人脸被切掉。
常见做法是配合 background-position 锁定焦点：
立即学习“前端免费学习笔记（深入）”；
body {
background-image: url('hero.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center top; /* 把顶部对齐容器顶部 */
}值可以是关键字（center、top、bottom）、百分比（20% 30%）或像素（10px 20px）。移动端常设 center bottom 防止头部文字被遮挡。
移动端适配要防“图片拉伸失真”
很多问题其实不是 CSS 导致的，而是图片本身分辨率低或宽高比极端。比如一张 400×300 的图，在 iPhone 15 Pro Max 上用 cover 拉伸到 1290×2796，必然糊。
- 优先提供至少 2x 分辨率的图（如
bg@2x.jpg），用srcset或媒体查询切换 - 避免用超细长图（如 1920×100）做全屏背景，横向拉伸后细节全丢
- 加
background-attachment: scroll（默认值），禁用fixed——后者在 iOS Safari 中容易触发重绘异常和模糊
HTML 元素没高度，背景图就“看不见”
这是最常踩的坑：div 里只放文字、没设 height 或 min-height，又用了 background-image，结果图不显示。
原因：空块级元素高度为 0，背景无处可绘。解决方式取决于场景：
- 内容区：用
min-height: 100vh确保至少一屏高 - Flex 容器子项：父级加
display: flex，子项加flex: 1占满剩余空间 - 图文混排：给元素设
padding或line-height建立基础高度
别依赖内容撑开——背景图加载慢于 HTML 渲染，内容还没来得及撑高，背景已尝试绘制并失败。
