CSS变量控制background-image路径需变量仅存路径字符串，url()必须写在属性值中；Safari 15.4前不支持url(var(--x))，兼容方案为JS注入或接受该版本为底线，且须用绝对路径并预加载关键图。
不能直接在 url() 内部用 var(--path) 拼接路径，但可以间接实现——关键在于写法和浏览器兼容性。
为什么 background-image: url(var(--bg)) 在旧版 Safari 里不显示
这不是你写错了，而是 CSS 规范落地进度问题。url(var(--x)) 属于 CSS Values and Units Level 4，直到 Safari 15.4 才开始支持。此前所有 Safari（包括 iOS）和部分安卓 WebView 会直接忽略整条 background-image 声明，背景变空白或回退到父级颜色。
- 检查方式：打开 DevTools → Elements → 查看该元素的 computed 样式里
background-image是否为空 - 兼容方案：降级为 JS 注入
style.backgroundImage，或统一用:root { --bg: "/img/1.jpg"; }+background-image: url(var(--bg));并接受 Safari 15.4+ 为底线 - 别用
--bg: "url(/img/1.jpg)";——变量里存完整url()是无效字符串，var(--bg)只会输出字面量文本
如何安全地用 CSS 变量控制 background-image 路径
核心原则：变量只存路径字符串，url() 必须写在属性值里，不能拆开、不能嵌套、不能拼接。
- 正确写法：
:root { --bg-path: "/assets/texture.svg"; }+.card { background-image: url(var(--bg-path)); } - 错误写法：
--bg-path: url("/assets/texture.svg");或background-image: url(var(--base) + "?v=2");（CSS 不支持字符串运算） - 多主题场景建议分组定义：
:root[data-theme="dark"] { --bg-path: "/img/dark-bg.jpg"; }，靠 HTMLdata-theme切换，避免 JS 频繁操作样式 - 路径必须是绝对路径（以
/开头）或协议完整路径；相对路径在 CSS 变量中解析行为不可控，尤其跨组件复用时容易出错
动态切换时图片闪一下，怎么缓解
这不是 CSS 变量的问题，是浏览器加载机制导致的——新路径首次触发时才发请求，中间存在视觉空档。
立即学习“前端免费学习笔记（深入）”；
- 提前预加载关键图：
<link rel="preload" as="image" href="/img/card-hover.jpg"> - 避免用
element.style.backgroundImage = ...直接改，优先用 class 切换（如el.classList.toggle("bg-hover")），让 CSS 过渡更可控 -
background-image本身不支持 CSS 动画，要淡入效果得用两层 DOM：底层固定旧图，上层设新图 +opacity: 0 → 1动画 - 快速连点切换时加简单节流：
if (isPending) return; isPending = true; setTimeout(() => isPending = false, 200);
真正麻烦的从来不是“能不能写”，而是“什么时候开始加载”和“浏览器认不认”。路径字符串进变量没问题，但 url() 的解析时机、缓存策略、preload 行为，才是影响体验的关键链路。别只盯着 CSS 写法，把资源生命周期也纳入控制范围。
