媒体查询中 background-image 不生效，需检查三点：CSS 声明顺序（媒体查询规则须在原声明之后）、URL 路径是否相对 CSS 文件且可访问、原样式若含 !important 则媒体查询中也需添加。
background-image 在媒体查询里写不生效？检查这三点
直接写 @media (max-width: 768px) { body { background-image: url('small.jpg'); } } 却没切换，大概率是层叠顺序或路径问题。CSS 规则本身完全支持在媒体查询中覆盖 background-image，但浏览器会按“最后声明且匹配的规则”生效，不是“最具体的就赢”。
- 确保媒体查询规则在原始
background-image声明之后（CSS 顺序很重要） -
url()路径必须相对当前 CSS 文件位置，不是 HTML 页面位置；用开发者工具的“Computed”面板点开background-image，看浏览器实际解析出的绝对路径是否 404 - 如果原始样式用了
!important，媒体查询里也得加，否则无法覆盖
用 picture 思路模拟响应式背景图？别硬套
有人想把 background-image 不支持 srcset 或 sizes。它只接受单个图像值，所谓“响应式背景图”本质就是靠多个媒体查询分别指定不同图片。
- 不能写
background-image: url('a.jpg') and (max-width: 768px)—— 语法错误 - 也不能在单条声明里写多个
url()用逗号分隔——那会变成多背景层叠，不是条件切换 - 真正有效的方式只有：用多个独立的
@media块，每个块内重写整个background-image声明
高清屏（2x）下背景图模糊？用 background-size 配合媒体查询
单纯换图还不够。比如你在 @media (-webkit-min-device-pixel-ratio: 2) 里用了 big@2x.jpg，但没调 background-size，图片可能被拉伸或裁剪失真。
- 推荐统一用
background-size: cover或contain，避免依赖图片原始尺寸 - 若需精确控制缩放比例，可配合
background-size: 100% 100%+ 媒体查询调整宽高比 - 注意：设备像素比查询（如
-webkit-min-device-pixel-ratio）和宽度查询（如max-width）应分开写，不要混在同一个@media条件里，否则容易漏匹配
性能坑：小屏幕加载大图怎么办？
CSS 媒体查询不会阻止浏览器提前下载所有 background-image。即使你写了 @media (min-width: 1200px) { .hero { background-image: url('huge.jpg'); } }，Chrome 仍可能在小屏下也请求 huge.jpg（尤其当规则在 CSS 文件靠前时）。
- 最稳妥的方式是把不同尺寸图的规则放在独立 CSS 文件中，用
media属性加载： - 或者改用
- 如果坚持用 CSS，至少把移动端规则放在 CSS 文件末尾，并启用 HTTP/2 Server Push 或 preload 提前提示关键图
真正麻烦的从来不是怎么写媒体查询，而是浏览器什么时候下载哪张图、在哪种网络条件下失效、以及设计师给的图命名根本对不上 @2x 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
