background-size: cover 是最常用、最稳妥的选择，它能真正实现“全屏铺满 + 保持比例 + 自适应”，而 background-size: 100% 100% 会强制拉伸导致变形，应避免使用。
直接说结论：background-size: cover 是最常用、最稳妥的选择，它能真正实现“全屏铺满 + 保持比例 + 自适应”，而 background-size: 100% 100% 看似简单，实则大概率导致图片变形，应避免在正式项目中使用。
为什么 background-size: 100% 100% 不是真正的“自适应”
这个值强制将图片宽高分别拉伸到容器的 100%，完全忽略原始宽高比。比如一张 4:3 的人像图，在 16:9 的屏幕上会被横向压扁；反之，一张竖构图的 9:16 图在桌面端会被严重拉宽。这不是“适配”，是“强扭”。background-size: cover 才是浏览器原生支持的等比缩放+裁切逻辑，视觉上更可控。
常见错误现象：
- 设计师反馈“人物脸变宽了” → 很可能用了
100% 100% - 移动端首屏出现大片顶部/底部留白 → 可能只设了
min-height: 100vh但没配background-position: center - 图片边缘模糊 → 大图被强制拉伸后像素失真，本质是分辨率不匹配，不是 CSS 能解决的
background-size: cover 必须配合的三个关键声明
单独写 cover 不够，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100vh：确保容器至少撑满视口高度（height: 100vh在父元素无高度时可能失效） -
background-position: center center：让裁切居中，避免关键内容（如人脸、Logo）被切掉 -
background-repeat: no-repeat：防止小图被平铺，这是默认行为但显式声明更安全
示例代码：
body {
margin: 0;
min-height: 100vh;
background-image: url("hero.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
当必须保留全部图片内容时，background-size: contain 怎么用
contain 适合图标、徽标、产品白底图等不能裁切的场景，但它会留白——这在全屏背景下通常不可接受。若设计硬性要求“不裁且无留白”，唯一办法是接受拉伸，但需换思路：
- 用
background-size: 100vw 100vh（注意单位是vw/vh，不是%），它按视口尺寸拉伸，比100% 100%更稳定 - 对关键区域做 SVG 遮罩或伪元素叠加，把留白区域用渐变/色块覆盖
- 改用
<img alt="在CSS中如何实现背景图片全屏铺满且自适应拉伸" >标签 +object-fit: cover，它比 background-image 更易调试、支持懒加载、可设置alt属性
移动端和性能容易被忽略的细节
background-attachment: fixed 在 iOS Safari 和部分安卓浏览器中会导致滚动卡顿或背景错位，2026 年仍不建议在全屏背景中启用。如果需要视差效果，优先用 transform: translateZ(0) 触发硬件加速，或改用 Intersection Observer + JS 动态控制。
性能提示：
- 大图用
cover时，浏览器仍会解码整张图，哪怕只显示中间一部分 —— 建议用image-set()或srcset提供 1x/2x 版本 - 不要把 4K 图直接丢进
body背景，先用工具压缩到 800KB 以内，再配 WebP 格式 -
background-size的计算发生在每次重排，频繁改变容器尺寸（如 resize 监听）可能触发性能问题，静态全屏场景无需担心
最复杂的地方往往不在 CSS 写法本身，而在图片资源的选择与交付策略——尺寸、格式、压缩、响应式 srcset，这些才是影响最终效果的关键变量。
