css变量中--bg: url(./logo.png)失效是因为变量值被当作纯字符串存储，浏览器不会二次解析url()函数；正确写法是--bg: "./img/bg.jpg"，配合background-image: url(var(--bg))使用，且路径需相对于css文件位置计算。
可以，但必须只存纯路径字符串，不能带 url() 包裹，也不能直接存 Base64 数据 URI。
为什么 --bg: url(./logo.png) 会失效
这不是浏览器 bug，而是 CSS 变量规范决定的：变量值是纯字符串，url(./logo.png) 在声明时就被当作字面量文本存储，后续用 background-image: var(--bg) 时，浏览器不会二次解析这个字符串为资源地址——结果就是背景空白，控制台报 Failed to load resource。
-
--bg: "./img/bg.jpg"✅（路径带引号） -
--bg: url("./img/bg.jpg")❌（变量里已含url()） -
--bg: ./img/bg.jpg❌（缺引号，空格或特殊字符会解析失败）
url(var(--x)) 的兼容性底线是 Safari 15.4
这是 CSS Values and Units Level 4 的特性，旧版 Safari（iOS 15.3 及更早）、部分安卓 WebView 会直接忽略整条 background-image 声明，导致样式丢失。
- 验证方式：DevTools → Elements → 查看 computed 样式中
background-image是否为空 - 降级方案：对不支持的环境，改用内联
style或 JS 动态设置element.style.backgroundImage - Vite / Webpack 构建环境下，确保输出 CSS 文件路径与图片相对关系不变，否则
url(var(--x))解析出的路径会 404
动态切换背景图时，别在 JS 里拼 url()
用 element.style.setProperty('--bg-path', './new.jpg') 没问题，但千万别写成 element.style.setProperty('--bg-url', 'url(./new.jpg)')——这又把 url() 塞进变量里，重蹈覆辙。
- JS 只传路径字符串：
el.style.setProperty('--bg-path', '/assets/hero2.jpg') - CSS 侧统一用：
background-image: url(var(--bg-path)) - 路径是相对于 CSS 文件位置计算的，不是 HTML 或 JS 所在目录；若 CSS 是内联的（
<style></style>），才以 HTML 为基准
真正容易被忽略的是路径计算基准和构建工具对静态资源的处理逻辑——变量值本身没变，但 ./assets/img/ 在开发服务器、Vite public 目录、Webpack hash 输出下指向完全不同位置。靠变量“存路径”只是第一步，路径语义是否匹配运行时环境，才是实际加载成败的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
