html中url如何放多个变量,有没有办法用url（）插入CSS变量？

您可以使用大多数CSS函数执行插值，包括rgba()(请参见此处的示例)。实际上，插值是自定义属性的主要功能之一。

但是，您不能使用来执行此操作url()，因为url(var(--url))不能将其解析为url(功能令牌，var(--url)后跟一个)，但单个url()令牌无效，因为该令牌var(--url)本身被视为URL本身，并且url()令牌中未引用的URL 不能包含括号，除非将其转义。这意味着替换实际上不会发生，因为解析器从不会var()在属性值中看到任何表达式-实际上，您的background声明是完全无效的。

如果您不了解其中任何一项，那就很好。只知道由于遗留原因您不能使用var()插值url()。

即使问题中描述的问题与遗留url()令牌有关，也不能通过在多个var()表达式中构建URL令牌来实现此目的，以防万一您正在尝试尝试类似--uo: url(; --uc: );或--uo: url("; --uc: ");，和的情况background: var(--uo) var(--url) var(--uc);。这是因为自定义属性不能包含不匹配的字符串定界符或部分url()标记(称为错误URL标记)。

如果要在自定义属性中指定URL，则需要写出整个url()表达式，并替换为整个表达式：

:root {

--url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");

}

body {

background: var(--url);

}

或者，使用JavaScript代替var()执行插值。