CSS自定义属性中的URL能否相对于定义它的CSS文件？

你遇到的是CSS自定义属性中相对URL的解析上下文问题：当你在自定义属性中定义url(./img.svg)时，这个URL的解析时机不是在定义它的CDN样式表（https://my.cdn/a/lib.css）中，而是在使用该变量的上下文里——要么是引用变量的HTML文档（https://my.server/index.html），要么是引用变量的其他样式表（https://my.server/b/lib.css），所以会出现相对路径错误的情况。

这不是浏览器bug，而是CSS变量的标准行为：自定义属性的值会被当作原始字符串传递到使用的位置，再进行解析，<url>类型的变量也遵循这个规则。早期Chrome的实现可能存在差异，但现在已经对齐了规范。

1. 直接使用绝对URL定义变量 #

这是最直接的方案，在库的样式表中把资源URL写成完整的绝对路径：

/* https://my.cdn/a/lib.css */
@property --img {
  syntax: "<url>";
  initial-value: none;
  inherits: true;
}

:root {
  --img: url(https://my.cdn/a/img.svg);
}

这样不管用户在哪个上下文使用var(--img)，解析出来的都是正确的CDN资源地址。如果需要适配不同的部署环境，可以在构建阶段用工具（比如PostCSS、Webpack）动态注入基础URL，比如把https://my.cdn/a/作为变量替换进去。

2. 用JS动态注入库的基础URL #

如果不想硬编码绝对URL，可以通过JavaScript获取库样式表的地址，计算出基础URL后设置到全局变量中，再在CSS里拼接使用：

步骤1：添加JS代码（可嵌入库的样式表末尾，或作为独立脚本） #

// 获取库的样式表链接
const libStyle = document.querySelector('link[href*="/a/lib.css"]');
if (libStyle) {
  // 计算样式表所在目录的绝对URL
  const baseUrl = new URL('./', libStyle.href).href;
  // 设置全局自定义属性
  document.documentElement.style.setProperty('--lib-base', `"${baseUrl}"`);
}

步骤2：在库的CSS中使用基础URL拼接资源路径 #

/* https://my.cdn/a/lib.css */
@property --img {
  syntax: "<url>";
  initial-value: none;
  inherits: true;
}

:root {
  --img: url(var(--lib-base)img.svg);
}

这种方式不需要硬编码CDN地址，适配性更强，用户在任何位置引入库都能自动计算正确的资源路径。

3. 保留工具类但扩展灵活性 #

如果还是想保留自定义属性的灵活性，可以扩展工具类的覆盖范围，覆盖更多使用场景：

/* https://my.cdn/a/lib.css */
@property --img {
  syntax: "<url>";
  initial-value: none;
  inherits: true;
}

:root {
  --img: url(./img.svg);
}

/* 扩展多个工具类 */
.bg-img { background-image: var(--img); }
.border-img { border-image-source: var(--img); }
.content-img { content: var(--img); }

用户可以根据需要直接添加对应的类，不需要自己写background-image: var(--img)，同时覆盖更多使用场景。

核心问题是CSS变量的解析上下文特性，解决思路要么是让URL脱离相对解析（用绝对路径），要么是确保解析时使用库的基础URL（JS动态注入），或者在库内部完成URL的解析（工具类）。

内容的提问来源于stack exchange，提问作者Dominik Schreiber