背景图响应式必须显式声明尺寸行为：cover裁剪但满屏，contain留白但完整；需配合background-position:center；@media中应按断点换图源而非仅调size；image-set()因只认dpr、不支持艺术指导且兼容性差而不适用；容器须有尺寸且设降级色。
背景图片做不到“自动响应式”，必须靠显式声明不同尺寸下的行为，否则在小屏上不是被裁掉关键内容，就是缩成一团看不清。
background-size: cover 和 contain 怎么选
这两个值控制图片怎么填满容器，但效果截然不同：
-
cover：强制缩放图片使其完全覆盖容器，宽高比不变，必然裁剪——适合大屏 banner、视觉优先的卡片； -
contain：缩放图片使其完整可见，宽高比不变，必然留白——适合移动端需保留全部信息的图（如流程图、带文字的示意图）； - 别用
auto或固定像素值，它们在视口变化时会直接失真或溢出； - 无论选哪个，都得配
background-position: center，否则裁剪/留白位置不可控。
@media 中 background-image 路径怎么换
媒体查询不能只改 background-size，要真正适配不同屏幕，得换图源——尤其是构图差异大的场景（比如手机用横版图、桌面用竖版图）：
- 按断点从小到大写，避免规则被覆盖：
@media (max-width: 768px)→@media (min-width: 769px) and (max-width: 1199px)→@media (min-width: 1200px)； - 每个断点里重写完整的
background-image，不要只写一次然后指望继承； - 所有断点保持相同的
background-position和background-size值，否则切换时会出现跳变； - 路径建议用相对路径或 CDN 统一前缀，避免本地开发和上线环境不一致。
为什么 image-set() 不适合做响应式背景图
image-set() 看起来很美，但它只认设备像素比（1x/2x），不看屏幕宽度：
- iPad Pro（2x 屏）会加载桌面 2x 图，哪怕它只有 768px 宽；
- 一台 1080p 的 Windows 笔记本（1x）不会触发高清图，即使你希望它加载更大尺寸；
- Firefox 完全不支持
image-set()用于background-image； - 它没法实现「艺术指导」——比如手机端换一张横向构图的图，桌面端换一张竖向特写的图。
容易被忽略的细节：容器尺寸和降级色
再精准的 CSS 规则，如果容器没尺寸，背景图就根本不会显示：
- 确保元素有明确的
width和height（或min-height），否则background-image在空容器里不可见； - 加
background-color作为降级色，尤其当图片加载慢或失败时，能避免白块闪动； - 如果主图颜色固定，建议把主色调提成 CSS 变量（如
--bg-primary: #2a5c82），用background-color: var(--bg-primary)配合图片，视觉更连贯； - 别依赖
background-repeat: no-repeat就以为万事大吉——检查开发者工具的 Network 面板，确认图片实际请求路径是否 404。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
