CSS变量中存url(...)字符串会导致background-image: var(--bg)失效，因浏览器不解析变量内的函数调用，仅将其视为非法字符串而忽略整条声明。
为什么 setProperty('--bg', 'url(./img.png)') 后背景图不显示
因为 --bg 的值被存为纯字符串 "url(./img.png)"，而 background-image: var(--bg) 等价于写死 background-image: "url(./img.png)"——这不是合法的 CSS 语法，浏览器直接忽略整条声明。
对比 color 或 background-color：它们接受字符串字面量（如 "red"），但 background-image 必须是 url() 函数调用，不是字符串。变量里存 url(...) 只是“看起来像”，实际不会触发任何解析逻辑。
常见错误写法：
root.style.setProperty('--bg', 'url(./img.png)'); // ❌ 存的是字符串，非函数调用
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 动态设置路径时，为什么图片加载失败或路径 404
即使 url(var(--path)) 语法正确，仍可能看不到图，问题往往出在路径解析或加载时机上：
- CSS 中的
url()路径始终相对于 CSS 文件位置，不是 HTML 或 JS 所在目录；若 CSS 是内联的（<style></style>），才以 HTML 为基准 - 用
setProperty()改变量后，浏览器不会自动预加载新图片；如果图片还没加载完，背景会短暂变透明或回退到默认色 - 相对路径中含
../时，开发服务器与生产 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));
这个模式的关键在于：变量值必须是纯路径字符串，不含函数、括号、引号；所有语法合法性由 CSS 引擎在解析时保障。一旦涉及构建时资源哈希、CDN 域名、环境前缀等复杂路径，就该交给构建插件（如 vite-plugin-static-copy 或 Webpack 的 file-loader）处理，而不是靠 JS 字符串拼接兜底。
