cover、contain、100% 100% 三者按需选用：cover等比填满易裁剪，适合全屏Banner；contain等比完整显示必留白，适合图标；100% 100%强制拉伸失真，仅用于可接受形变的纹理。
background-size 的三个常用值怎么选
background-size 是控制背景图缩放行为的核心属性，不是所有值都适合响应式场景：
-
cover：等比缩放填满容器，可能裁剪边缘。适合全屏 Banner 或强调视觉冲击的背景，但要注意关键内容（如人脸、文字）别被裁掉 -
contain：等比缩放显示完整图片，留白不可避免。适合图标、徽标类背景，或需要确保图像信息 100% 可见的场景 -
100% 100%：强制拉伸填充，会失真。仅在明确接受形变（如纯纹理、渐变底图）时使用
auto 或 auto auto 在响应式中基本没用——它不缩放，只按原始尺寸铺开，小图在大屏上重复，大图在小屏上溢出。
为什么只靠 background-size 不够，必须配 media query
background-size 自身没有“断点意识”。比如设成 cover，在手机竖屏下可能把人像头部切掉，在桌面横屏下又显得太“满”，缺乏语义控制。
media query 的作用是按设备上下文切换策略：
立即学习“前端免费学习笔记（深入）”；
- 小屏（
@media (max-width: 768px)）：改用contain或降低背景图分辨率，避免加载大图拖慢首屏 - 中屏（平板）：保持
cover，但换一张构图更居中的图（通过background-image覆盖） - 大屏：可加
background-attachment: fixed做视差，但注意 iOS Safari 不支持
关键点：media query 不只是改尺寸，更要配合图片源、定位、甚至是否启用背景图本身（比如移动端用纯色替代图片）。
实际写法中容易被忽略的细节
-
background-position 必须和 background-size: cover 配合用，否则默认居中可能切掉重要内容。常见写法：background-position: center top 或 background-position: 50% 20%
- 图片本身要提供多倍图（
@2x），但不能只靠 background-image: url(img@2x.jpg) —— 应用 image-set() 或用 media query 分辨率判断
-
background-repeat 默认是 repeat，但多数响应式背景需显式设为 no-repeat，否则小图在大屏上疯狂平铺
- 如果背景图是装饰性内容，记得加
background-color 作为降级色，防止图片加载失败时页面空白
一个轻量但可靠的响应式背景图写法.hero {
background-image: url(./bg-sm.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #f0f0f0;
}
@media (min-width: 768px) {
.hero {
background-image: url(./bg-md.jpg);
}
}
@media (min-width: 1200px) {
.hero {
background-image: url(./bg-lg.jpg);
}
}
background-position 必须和 background-size: cover 配合用，否则默认居中可能切掉重要内容。常见写法：background-position: center top 或 background-position: 50% 20% @2x），但不能只靠 background-image: url(img@2x.jpg) —— 应用 image-set() 或用 media query 分辨率判断 background-repeat 默认是 repeat，但多数响应式背景需显式设为 no-repeat，否则小图在大屏上疯狂平铺 background-color 作为降级色，防止图片加载失败时页面空白 .hero {
background-image: url(./bg-sm.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #f0f0f0;
}
@media (min-width: 768px) {
.hero {
background-image: url(./bg-md.jpg);
}
}
@media (min-width: 1200px) {
.hero {
background-image: url(./bg-lg.jpg);
}
}
注意：这里没用 picture 或 srcset，因为它们不适用于 CSS 背景图；真正要精细控制 DPR 和视口宽度，得靠 image-set()（目前 Chrome/Firefox 支持，Safari 仍有限制）。
复杂点不在怎么写，而在你是否清楚每张背景图的构图重点、最小安全显示区域，以及用户最可能在什么尺寸下看到它。
