能，但必须变量只存纯路径字符串且浏览器支持url(var(--x))——safari 15.4+为底线；--bg: url(...)失效因变量存的是字面量字符串，浏览器不二次解析，导致背景空白。
能，但必须满足两个硬性条件：变量只存纯路径字符串，且浏览器支持 url(var(--x)) 语法——Safari 15.4+ 是底线，旧版 Safari 和多数安卓 WebView 会直接忽略整条 background-image 声明。
为什么 --bg: url(./logo.png) 一定失效
这不是浏览器 bug，而是 CSS 变量规范本身决定的：变量值是纯字符串，url(./logo.png) 在声明时就被当作字面量文本存储，后续用 background-image: var(--bg) 时，浏览器不会二次解析这个字符串为资源地址。结果就是背景空白，控制台报 Failed to load resource。
-
--bg: "./img/bg.jpg"✅（带引号，纯路径） -
--bg: url("./img/bg.jpg")❌（变量里已含url()） -
--bg: ./img/bg.jpg❌（缺引号，含空格或特殊字符时必然解析失败）
url(var(--x)) 的写法和路径规则
变量只负责存路径，url() 必须在使用处显式包裹。路径是相对于 CSS 文件位置计算的，不是 HTML 或 JS 所在位置。
- 声明：
:root { --icon-home: "./assets/icon-home.svg"; } - 使用：
.nav-item.home { background: url(var(--icon-home)); } - 路径必须加引号（单/双均可），否则
./a b.png这类含空格路径会直接解析失败 - 不要用
background-image: var(--x)，那等同于把字符串当样式值，无效
媒体查询中切换背景图为何不生效
变量重定义本身没问题，但 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不在媒体查询作用域内，仍取初始值 - ✅ 正确写法：把选择器也放进媒体查询，如
@media (min-width: 768px) { .hero { --bg-url: "b.jpg"; background-image: url(var(--bg-url)); } } - ⚠️ 注意：
--bg-url: "img/phone.jpg"要写成--bg-url: img/phone.jpg（无引号），否则url(var(--bg-url))会拼出url("img/phone.jpg")，语法非法
真正容易被忽略的是兼容性兜底——url(var(--x)) 在 Safari 15.3 及更早版本里不是“加载慢”，而是整条 background-image 声明被静默丢弃，连 fallback 都没机会触发。如果项目还需支持 iOS 15.3 或部分安卓 WebView，就得用 JS 注入或构建时预处理替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
