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 是否为空。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

若需支持更老 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+ 限制）

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！