先记住这个答案
响应式背景图通常通过媒体查询更换素材，并用 background-size 和 background-position 控制裁切；同一构图的不同像素密度版本可考虑 image-set()。但背景图是 CSS 装饰层，不带替代文本，也不会给容器提供固有尺寸。商品照片、文章配图、图表等承载信息的图片应使用 <img> 或 <picture>，由 srcset、sizes 等机制选择资源。
- 背景图适合纯装饰素材
- 媒体查询可在断点切换图片
image-set()可选择像素密度- 内容图优先用
<img>或<picture>
横幅装饰图按版式切换
桌面横幅很宽，手机版更窄。如果只把桌面大图 cover 到手机容器，人物可能被裁掉；这时适合在断点切换另一张构图。图片是装饰时，标题和按钮仍应作为真实 HTML 放在背景上方。
.hero { min-height: 320px; background: center / cover url('/hero-wide.webp'); }
@media (max-width: 640px) {
.hero { min-height: 420px; background-image: url('/hero-tall.webp'); }
}这里断点解决的是构图问题，不是单纯追求某种设备宽度。cover 保持比例并填满容器，边缘可能被裁掉；重要文字不能烘焙在图片里，否则裁切后可能读不到。
背景图需要容器自身有高度。若横幅里没有足够内容，可用 min-height 或 aspect-ratio 保留空间，避免图片下载前区域坍缩。
内容图片交给 HTML
商品封面是用户理解商品的必要信息，用背景图会失去自然的 alt 描述。浏览器也不能像 <img> 那样直接利用 srcset、sizes 和宽高属性做资源选择与布局占位。
同一页面可以混用：装饰纹理做背景，商品图用 <img>。如果需要按画面宽度或格式提供不同文件，<picture> 更适合；如果只是高密度屏资源选择，srcset 的密度描述符更直接。
资源加载也要分清。CSS 背景写在样式规则中，浏览器只有在规则应用、元素需要绘制时才会请求它；内容图片则能借助 HTML 标记、loading 和响应式候选参与页面加载策略。首屏主视觉若确实是关键内容，不应只因为做成背景容易裁切，就失去替代文本和明确的宽高占位。把装饰与信息分清，后续再决定裁切和资源选择方式。
容易答错的地方
- 给承载信息的图只写背景
- 背景图没有与图片对应的替代文本。图表、商品照片等内容应在 HTML 中有可访问的表达。
- 以为
cover会完整显示图片 cover保证铺满区域，可能裁剪四周；完整显示应考虑contain，但会出现留白。
面试官还会怎么问？
背景图能针对高 DPR 选择资源吗？
可用 CSS 的 image-set() 提供不同密度候选，但仍不解决内容图的语义和尺寸占位问题。
用媒体查询切图还是用 srcset？
构图和布局变化用媒体条件更合适；同一内容图按显示尺寸选择分辨率，优先用 <img> 的 srcset 与 sizes。
背景图加载失败会怎样？
容器与 HTML 内容仍在，但装饰消失。要保证前景文字在背景缺失时仍有足够对比度。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。