CSS 背景图路径在开发、测试、生产等不同环境失效，根本原因通常是资源路径写死（如 url(/static/img/logo.png)），而各环境部署的静态资源根路径不一致（比如本地用 /，测试环境用 /test/，生产用 /app-v2/）。直接拼接路径或靠构建工具替换容易出错、难维护。用 CSS 自定义属性（CSS 变量）统一管理基础路径，配合构建时注入或运行时设置，能有效解耦路径逻辑。
用 CSS 变量声明基础资源路径
在根级样式（如 :root）中定义一个语义化变量，比如 --base-url，代表静态资源的公共前缀：
:root {
--base-url: "/"; /* 开发默认值，可被覆盖 */
}
.header {
background-image: url(var(--base-url)img/bg-header.jpg);
}
注意：url() 内部不能直接嵌套 var()（除非整个 url(...) 是变量值），但可以像上面这样把 var(--base-url) 和字符串拼接——这是合法且广泛支持的写法（Chrome 86+、Firefox 80+、Safari 15.4+ 均支持）。
构建时注入环境对应路径（推荐）
借助打包工具，在构建阶段根据 NODE_ENV 或自定义环境变量，动态生成对应的 CSS 变量值：
立即学习“前端免费学习笔记（深入）”；
- Webpack：用
DefinePlugin注入全局常量，再在 JS 中写入document.documentElement.style.setProperty('--base-url', ...)；或用postcss-env-var插件在 CSS 编译期替换变量 - Vite：在
index.html的标签中通过import.meta.env.BASE_URL动态写入（Vite 默认将静态资源挂载到该路径下） - Vue CLI / Create React App：可在
public/index.html中添加内联脚本，读取process.env.PUBLIC_URL并设置 CSS 变量
避免常见陷阱
以下做法看似方便，实则隐患较大：
- 在 CSS 中用
@import加载不同环境的路径文件 —— 会触发额外请求，且无法按需加载 - 把完整 URL（含协议和域名）写进变量 —— 导致跨域、HTTPS 混合内容等问题，应只管路径前缀
- 在多个选择器里重复写
--base-url—— 违背“统一管理”初衷，应始终从:root继承 - 依赖 JS 运行后才设置变量 —— 若背景图在首屏，可能闪动或加载失败；建议在 HTML 的
尽早执行设置逻辑
兼容性兜底方案（可选）
若需支持较老浏览器（如 IE11 或旧版 Safari），可结合 CSS 类名 + 属性选择器做降级：
[data-env="prod"] .banner {
background-image: url("/app-v2/img/banner.jpg");
}
[data-env="dev"] .banner {
background-image: url("/img/banner.jpg");
}
再由 JS 在初始化时给 添加对应 data-env 属性。这种方式虽不如 CSS 变量灵活，但零兼容风险，适合强兼容要求场景。
