CSS变量不能直接存储url()函数，只能存纯路径字符串；background-image: var(--bg)不显示图片是因为展开后仅为字面量字符串而非有效资源引用，需显式写url(var(--path))且路径必须加引号。
CSS变量不能直接存储 url() 函数，只能存纯路径字符串；要让背景图加载成功，必须在 background-image 属性中显式写 url(var(--path))。
为什么 background-image: var(--bg) 不显示图片？
因为 var(--bg) 展开后只是字面量字符串（比如 "url(./img.png)"），而浏览器只在声明时解析一次 url()，之后不会二次执行。这个字符串不被识别为有效资源引用，结果静默失败——背景空白，控制台无报错。
常见错误写法：
-
--bg: url(./icon.svg);→ 变量里塞了函数，展开后是非法字符串 -
background-image: var(--bg);→ 缺少url()包裹，等价于设了个无效值 -
--bg: ./img.png;（没引号）→ 路径含空格或括号时直接解析失败
url(var(--x)) 的写法和路径引号规则
变量只存路径文本，url() 必须留在属性声明处。路径必须用单引号或双引号包裹，否则特殊字符会中断解析。
立即学习“前端免费学习笔记（深入）”；
正确示例：
:root {
--logo: "./assets/logo-dark.svg";
}
.logo {
background-image: url(var(--logo));
}
注意点：
- 引号是必需的：
--logo: "./assets/logo.svg"✅；--logo: ./assets/logo.svg❌（空格、中文、括号全崩） - 路径基准是 CSS 文件位置，不是 HTML 或 JS 所在目录
- Safari 15.4+ 才支持
url(var(--x))，旧版 Safari / 某些 WebView 会跳过整条规则
媒体查询中切换背景图要避免作用域错位
在 @media 里改 :root 的变量，但 .hero { background-image: url(var(--bg-url)) } 没包在同个媒体查询里，就会沿用初始值——不是变量没更新，而是样式没进作用域。
安全做法：
- 把变量重定义和样式规则都放进同一媒体查询内
- 或改用元素级作用域：
.hero { --bg-url: "./img/hero-mobile.jpg"; background-image: url(var(--bg-url)); } -
--bg-url值不要带引号：--bg-url: ./img/hero.jpg（注意：这里反而不能加引号，否则url(var(--bg-url))会拼出url("./img/hero.jpg")，语法非法）
用 data- 属性动态传路径，得靠 JS 中转
background-image: url(attr(data-bg)) 在所有主流浏览器都不生效——attr() 在 background-image 中未被实现，该行声明会被静默忽略。
可行链路只有两条：
- JS 直接写
el.style.backgroundImage = `url(${path})`（兼容性最好） - JS 同步
data-bg到 CSS 变量：document.documentElement.style.setProperty('--bg-path', path)，再配background-image: url(var(--bg-path))（需确认目标环境支持 Safari 15.4+）
真正容易被忽略的是：路径是否能在浏览器地址栏直接打开。调试前先复制 url() 里的完整路径，粘到地址栏看 SVG 或图片能否加载——很多“不显示”问题其实卡在路径本身就没通。
