CSS变量不能直接存完整url()字符串，因浏览器仅将其视为纯文本而非可解析函数；正确做法是变量只存路径片段（如--path: "./img.png"），再在background-image中用url(var(--path))拼接，且该语法仅Safari 15.4+等新版本支持。
CSS变量不能直接存完整url()字符串，浏览器只把它当纯文本，不会解析执行。
为什么setProperty('--bg', 'url(./img.png)')设置后背景图消失
因为--bg变量值是字符串"url(./img.png)"，而background-image: var(--bg)等价于写死background-image: "url(./img.png)"——这不是合法的CSS语法，浏览器直接忽略整条声明。
- 背景颜色能生效，是因为
color或background-color属性本身接受字符串值（如"red"、"#fff"） - 但
background-image必须是url(...)函数调用，不是字符串字面量 - 变量里存
url()只是“看起来像”，实际没触发任何解析逻辑
url(var(--path))写法在哪些浏览器不支持
该语法依赖 CSS Typed OM 和 url() 函数对变量的动态解析能力，Safari 15.4+ 才开始支持；旧版 Safari、Android WebView（尤其 Chrome 80 之前）、部分 Electron 内核会完全忽略background-image: url(var(--path))这条规则。
- 检查兼容性：用
getComputedStyle(el).backgroundImage读取，返回"none"或空字符串，大概率是解析失败 - 不要依赖
var(--path)自动补全url()——它从来就不会干这事 - 构建工具（如 Vite/Webpack）打包时也不会帮你转译这段，运行时行为完全由浏览器决定
JS动态切换背景图时路径加载失败的常见原因
即使url(var(--path))语法正确，仍可能看不到图，问题往往出在路径解析或加载时机上。
立即学习“前端免费学习笔记（深入）”；
- CSS 中的
url()路径始终相对于 CSS 文件位置，不是 HTML 或 JS 所在目录——如果你的 CSS 是内联在 HTML 里的（<style></style>），那才以 HTML 为基准 - 用
setProperty()改变量后，浏览器不会自动预加载新图片；如果图片还没加载完，背景会短暂变透明或回退到默认色 - 相对路径中含
../时，不同构建环境（开发服务器 vs 生产 CDN）可能映射不同，导致 404 - Webpack/Vite 的 asset 处理会重命名文件（如
smiley2.e2025ea6.png），但 JS 里硬写的"./Smileys/smiley2.png"无法匹配
真正可靠的做法：变量只存路径片段，拼接留在 CSS 里
把变量当作“占位符”，而不是“模板字符串”。让 CSS 负责语法组装，JS 只管传值。
- 定义变量时去掉
url()和引号：:root { --smiley-path: "./Smileys/smiley4.png"; } - CSS 中显式拼接：
background-image: url(var(--smiley-path)); - JS 更新只传路径片段：
document.documentElement.style.setProperty('--smiley-path', './Smileys/smiley2.png'); - 确保所有路径都基于同一基准（推荐统一用构建工具输出的 public 目录结构，避免
../）
最易被忽略的一点：路径是否真的被浏览器请求了？打开 Network 面板，过滤或
media类型，看那个 PNG 是否发起过请求、状态码是不是 200。没发请求，说明路径压根没进浏览器解析流程——那一定是变量没生效，或者url(var(--x))被整条丢弃了。
