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 变量灵活，但零兼容风险，适合强兼容要求场景。