我想将我的背景URL存储在自定义属性(CSS变量)中，并将它们与Background属性一起使用.但是，在将字符串用作url()中的参数时，我找不到插入字符串的方法.
以下是我的示例代码:
:root {
--url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}
body {
background: url(var(--url));
}
我知道使用Sass或更低版本的插值函数可以很容易地做到这一点，但我很好奇是否有一种方法可以在没有任何预处理器的情况下做到这一点.
您可以使用大多数CSS函数执行插值，包括rgba()(请参见示例here).事实上，插值是自定义属性的主要功能之一.
但使用url()不能做到这一点，因为url(var(--url))不是后跟var(--url)和)的url(函数令牌，而是一个无效的url()令牌，因为var(--url)本身被视为URL，并且url()令牌中未加引号的URL不能包含括号，除非对它们进行转义.这意味着实际上不会发生替换，因为解析器在属性值中看不到任何var()个表达式-实际上，您的background声明是完全无效的.
如果你一点都不明白，那也没关系.只需知道，由于传统原因，您不能对url()使用var()插值.
尽管问题中描述的问题与遗留url()令牌有关，但如果您想try --uo: url(; --uc: );或--uo: url("; --uc: ");和background: var(--uo) var(--url) var(--uc);之类的内容，也不能通过从多个var()表达式中构建URL令牌来实现这一点.这是因为custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).
如果要在自定义属性中指定url，则需要写出整个url()表达式，并对整个表达式进行替身:
:root {
--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}
body {
background: var(--url);
}
或者，使用JavaScript而不是var()来执行插值.