Html CSS自定义特性中的URL是否可以相对于定义的CSS文件

我有一个可以从任何地方(例如通过CDN)托管和使用的CSS库，其中还包含图像或字体等资源.我想让这些资源的URL作为自定义的CSS属性可用.这些URL必须是相对于库的.例如.

<!-- https://my.server/index.html -->
<link rel="stylesheet" href="https://my.cdn/a/lib.css">
<div style="background-image: var(--img)"></div>

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

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

<!-- https://my.cdn/a/img.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- […] -->
</svg>

我在寻找一种方法来制作div https://my.cdn/a/img.svg的有效背景图像URL(而不直接引用它，--img可能是none，或者有时指向完全不同的URL).但是，URL将始终相对于文档(即，URL将是https://my.server/img.svg).更糟糕的是，它相对于使用css Custom属性的样式表.也就是说，如果我

/* https://my.server/b/lib.css */
@import url("https://my.cdn/a/lib.css");
div {
  background-image: var(--img);
}

实际上应该是https://my.server/b/img.svg.

作为一种解决办法，a/lib.css本身提供了应用CSS自定义属性的CSS类，如

/* https://my.cdn/a/lib.css */
/* […] */
.img--background-image {
  background-image: var(--img);
}

这样，消费者就可以应用该类，并且正确解析URL，如

<!-- https://my.server/index.html -->
<link rel="stylesheet" href="https://my.cdn/a/lib.css">
<div class="img--background-image"></div>

显然，这个变通办法是有缺陷的，因为它限制了--img用于库所预见的用例的方式.而且您必须更改HTML(通过添加类)才能使用它.

我想当我回试Chrome实现@property的时候，URL被正确解析了.然而，今天的情况并非如此.

有谁遇到过类似的问题吗？你是怎么解决的？我错过了显而易见的事情了吗？