CSS变量可存储URL路径，background-image支持变量使用

CSS变量虽能灵活存储图片路径，但必须严格遵循“只存纯路径字符串（如`/img/1.jpg`），绝不包裹`url()`”的原则，否则`background-image: url(var(--bg-path))`在旧版Safari等浏览器中会静默失效；同时需注意`url(var())`语法自Safari 15.4起才获支持，更早版本需JS兜底，且`attr()`函数目前完全不可用于动态设置背景图——路径的绝对化、特殊字符转义与构建期资源预加载，才是保障视觉稳定性的关键细节。

可以，但必须只存路径字符串，不能存 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+ 限制）

最容易被忽略的一点：路径字符串里不能带空格、括号或未转义的特殊字符；即使变量内容正确，路径本身出错也会静默失败。建议所有路径统一用绝对路径，并在构建阶段预加载关键图资源。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS变量可存储URL路径，background-image支持变量使用》文章吧，也可关注golang学习网公众号了解相关技术文章。