CSS变量应只存纯路径字符串，如--bg-path: "/img/1.jpg"；若存url("/img/1.jpg")会导致background-image: var(--bg)失效，因浏览器不二次解析字符串。
可以，但必须只存路径字符串，不能存 url() 包裹后的完整值；否则在 background-image 中用 var(--x) 会失效。
为什么 --bg: url("/img/1.jpg") 是错的
变量里存 url() 是常见误解。CSS 变量本质是字符串容器，--bg: url("/img/1.jpg") 实际存储的是字面量文本 url("/img/1.jpg")，不是可解析的 URL 值。当写成 background-image: var(--bg) 时，浏览器不会二次解析这个字符串为资源引用，而是直接当作无效值丢弃——结果就是背景空白。
正确做法是变量只存纯路径：
:root { --bg-path: "/img/1.jpg"; }.card { background-image: url(var(--bg-path)); }
url(var(--x)) 的浏览器兼容性底线是 Safari 15.4
这不是 bug，是规范落地节奏问题。url(var(--x)) 属于 CSS Values and Units Level 4，Safari 直到 15.4（2022 年 3 月发布）才开始支持。此前所有 Safari（含 iOS）和多数安卓 WebView 会整条忽略 background-image 声明。
立即学习“前端免费学习笔记（深入）”；
验证方式：打开 DevTools → Elements → 查看该元素的 computed 样式中 background-image 是否为空。
若需支持更老 Safari：
- 改用 JS 注入：
el.style.backgroundImage = `url(${path})` - 或接受 Safari 15.4+ 为最低支持版本
- 绝对路径优先，避免相对路径在不同上下文中的解析歧义
attr(data-bg) 不能用于 background-image
有人想用 background-image: url(attr(data-bg)) 动态读取 HTML 属性，这条路走不通。目前没有任何主流浏览器支持在 background-image 中使用 attr() 函数——它仍在 CSS Values and Units Level 4 草案中，未实现。
可行替代方案：
- JS 读取
el.dataset.bg后设置el.style.backgroundImage - 或先用 JS 把
data-bg值写入 CSS 变量：el.style.setProperty('--bg-from-data', el.dataset.bg)，再在 CSS 中用url(var(--bg-from-data))（仍受 Safari 15.4+ 限制）
最容易被忽略的一点：路径字符串里不能带空格、括号或未转义的特殊字符；即使变量内容正确，路径本身出错也会静默失败。建议所有路径统一用绝对路径，并在构建阶段预加载关键图资源。
