css变量在媒体查询中重定义未生效，是因为background-image: url(var(--bg-url))需变量与样式同属匹配的媒体查询作用域，且变量值不能带引号或空格，否则url()解析失败。
为什么直接在媒体查询里改 --bg-url 变量没生效？
因为 CSS 变量（:root 作用域）本身不“响应”，它只是静态声明；媒体查询中重定义变量，只有当选择器匹配且变量被实际使用时才起作用——但关键在于：background-image: url(var(--bg-url)) 这个声明不会在变量更新后自动重计算。浏览器解析 url() 时，若 var(--bg-url) 当前为空、无效或未在当前匹配的作用域中定义，就会静默失败（降级为无背景），而不是等待变量就绪。
真正起效的前提是：变量必须在媒体查询生效的范围内被声明，且 background-image 所在的选择器也匹配该媒体查询（或其父级已限定作用域）。
- ✅ 正确做法：把变量声明和样式规则都放进同一媒体查询内，或用元素级作用域（如
.hero { --bg-url: ...; background-image: url(var(--bg-url)); }） - ❌ 错误写法：
:root { --bg-url: "a.jpg"; } @media (min-width: 768px) { :root { --bg-url: "b.jpg"; } .hero { background-image: url(var(--bg-url)); } }—— 此时.hero未被该媒体查询包裹，仍用 :root 的初始值 - ⚠️ 注意：
url()不接受空格或引号包裹的变量值；--bg-url: "img/phone.jpg"要写成--bg-url: img/phone.jpg（无引号），否则url(var(--bg-url))会拼出url("img/phone.jpg")，语法非法
如何用单个 class 实现多断点背景图切换？
把变量声明和背景应用绑定到同一个响应式 class 上，避免依赖 :root 全局污染，也规避作用域错位问题。
.hero {
--bg-url: url(./bg-mobile.jpg);
background-image: var(--bg-url);
background-size: cover;
}
@media (min-width: 768px) {
.hero {
--bg-url: url(./bg-tablet.jpg);
}
}
@media (min-width: 1200px) {
.hero {
--bg-url: url(./bg-desktop.jpg);
}
}
这个写法能工作，是因为每次媒体查询匹配时，.hero 规则被重新应用，--bg-url 被重赋值，而 background-image: var(--bg-url) 是实时读取的——前提是它写在同一个选择器块里（或继承链上）。如果拆成两行（比如变量在 @media 里，background-image 在外层），就不行。
- 变量必须与
background-image处于同一声明块，或确保父级已声明且子级可继承（但background-image不继承，所以必须同级或显式重写） - 路径建议用相对路径（如
./bg.jpg），避免构建工具处理异常；绝对路径（/assets/bg.jpg）也可，但需确认服务端路由一致 - 不要试图在
url()内做字符串拼接：url(var(--prefix) + "/bg.jpg")无效，CSS 不支持表达式
遇到 net::ERR_ABORTED 或空白背景怎么办？
这是最常卡住人的地方：控制台报资源加载失败，但文件明明存在。根本原因通常是变量值未被正确解析为合法 URL 字符串。
- 检查变量值是否含多余空格：
--bg-url: ./bg.jpg→ 去掉前后空格，CSS 变量值中的空格会被原样传入url() - 确认没有双引号：
--bg-url: "img/bg.jpg"错，--bg-url: img/bg.jpg对；引号会让url(var(--bg-url))解析成url("img/bg.jpg")，违反 URL 函数语法 - 验证变量是否真的被读取：在 DevTools 中选中元素 → Styles 面板 → 查看
background-image计算值，如果是none或url(invalid)，说明变量为空或格式错误 - 临时加调试样式：
.hero::before { content: var(--bg-url); }可直观看到变量当前值（注意仅限纯文本，不能用于 url）
要不要用 image-set() 替代 CSS 变量？
如果只关心分辨率适配（dpr），image-set() 更轻量且原生支持，比如：background-image: image-set("./bg.jpg" 1x, "./bg@2x.jpg" 2x);。但它不解决「按视口宽度切换不同构图图片」的需求——比如手机用竖版 banner，桌面用横版大图。
CSS 变量方案的优势在于完全可控的断点逻辑和任意图片源切换，缺点是无法触发浏览器预加载（不像 <picture></picture> 或 srcset）。所以真实项目中，更推荐混合策略：
- 结构简单、仅需 dpr 适配 → 用
image-set() - 需要按宽度换图、或图源来自 CMS 动态注入 → 用 CSS 变量 + 媒体查询
- 对首屏性能敏感 → 配合
loading="eager"的占位图或 JS 懒加载兜底，因为纯 CSS 变量切换无法让浏览器提前发起请求
变量名别起太泛，比如 --bg 容易冲突，明确写成 --hero-bg-url；断点值尽量和项目全局断点一致，别在 CSS 里硬编码 768px 多次，可抽成 --breakpoint-tablet: 768px 再引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
