在@media中用background-image响应式换图需确保选择器权重足够、路径正确（如url(./img/bg-mobile.jpg)）、补全background-repeat和background-size；注意缓存问题（加?v=版本号）、所有图均会下载的性能缺陷，以及cover/contain裁剪风险。
background-image在media query里怎么写才生效
直接在@media块里用background-image覆盖就行，但必须确保选择器权重足够、且没被更高优先级的规则（比如内联样式或!important）锁死。很多人写了media query却没换图，其实是CSS层叠顺序出了问题。
- 写法要完整：用
url()包裹路径，路径建议用相对路径（如url(./img/bg-mobile.jpg)），避免空格或中文导致解析失败 - 别漏掉
background-repeat和background-size——默认是平铺+不缩放，小图在大屏上会拉伸变形，大图在小屏上可能只显示左上角 - 移动端优先时，先写基础样式（小图），再用
@media (min-width: 768px)覆盖为桌面图；反过来也行，但得统一逻辑，别混着来
为什么background-image换了但页面没更新
常见原因是浏览器缓存了旧背景图，尤其当文件名没变、只替换了文件内容时。开发中容易忽略这点，以为CSS生效了，其实浏览器还在用缓存里的旧图。
- 开发阶段加版本参数：把
url(./bg.jpg)改成url(./bg.jpg?v=2)，改图就改v值 - 检查Network面板，看对应图片请求返回的是200还是304——304说明缓存命中，不是CSS问题
- 如果用了CDN或构建工具（如Webpack），确认图片是否被哈希重命名，否则上线后也可能卡在旧资源上
background-image响应式时的性能坑
用media query切换背景图，浏览器不会自动卸载未匹配的图片，所有background-image声明的图都会被下载（除非用prefers-reduced-motion等特殊条件）。这意味着你写了3个断点，手机访问也会把桌面图下完。
- 真正想按设备加载，得用
<picture>+<source media>，但那是HTML方案，background-image做不到按需下载 - 折中办法：用
max-width+min-resolution组合，比如@media (max-width: 480px) and (min-resolution: 2dppx)，缩小高分屏小图的尺寸，减少总字节数 - 慎用SVG作为背景：单个SVG文件小，但复杂矢量图渲染成本高，低端安卓机可能出现卡顿
background-size: cover和contain的实际表现差异
这两个值看着简单，但和background-position一配合，很容易让关键内容被裁掉——尤其是用cover时，图片会居中缩放并裁边，顶部标题或底部按钮可能直接消失。
立即学习“前端免费学习笔记（深入）”；
-
cover适合装饰性背景，确保填满；contain适合图标类小图，保证完整可见但留白多 - 关键内容区域（比如带文字的Banner）建议用
background-position: top center+cover，把重要内容“钉”在可视区上方 - 测试时别只看Chrome，iOS Safari对
background-size解析更严格，某些老版本不支持auto 100%写法
