background-image: url(var(--path)) 才能生效，因为 css 变量仅存储字符串，url() 必须在声明处执行解析；路径需加引号，相对 css 文件定位，且 safari 15.4+ 才支持该语法，旧版需 @supports 降级。

为什么 background-image: var(--path) 不生效

直接写 background-image: var(--bg) 且 --bg 值为 "url(./img.png)"，浏览器不会加载图片——因为 CSS 变量只存字符串，url() 函数在声明时就被静态解析过一次，变量展开后只剩字面量字符串，不是可执行的资源引用。

正确写法：路径存变量，url() 留到使用处

变量只存纯路径（带引号），使用时再套 url()：

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

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

下载

• :root { --icon-home: "./assets/icon-home.svg"; }
• .nav-item { background-image: url(var(--icon-home)); }
• 路径必须用双引号或单引号包裹，否则含空格、括号等特殊字符会解析失败
• 路径是相对于 CSS 文件位置计算的，不是 HTML 或 JS 所在目录

Safari 和旧 WebView 的兼容性陷阱

url(var(--x)) 语法从 Safari 15.4 才开始支持；更早版本和部分安卓 WebView 会直接忽略整条 background-image 声明，导致背景空白。

• 检查目标环境是否支持：可用 @supports (background-image: url(var(--x))) 做降级
• 不支持时，回退方案只能靠 class 切换预设样式，或 JS 注入 style 属性
• 避免在关键首屏区域依赖该语法，尤其面向企业内网等老旧终端

JS 动态切换时容易漏掉的细节

用 JS 改 document.documentElement.style.setProperty('--bg-path', '...') 后，图片不一定立刻显示。

• 新路径对应图片未预加载时，会出现短暂空白；建议提前用 <link rel="preload" as="image" href="...">
• 不要直接写 element.style.backgroundImage = 'url(' + path + ')'，会绕过 CSS 变量缓存机制，且难维护
• 快速连续切换时，浏览器可能复用旧图缓存；加个时间戳参数（如 ?t=123）可强制刷新，但注意 CDN 缓存策略

CSS 变量控制背景路径的关键不在“怎么赋值”，而在于“在哪解析”——变量只是容器，url() 必须在属性声明现场执行，否则就只是字符串。

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