有没有办法用url（）插入CSS变量？

有没有办法用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()

执行插值。