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

Question 1

我想将背景URL存储在自定义属性（CSS变量）中，并将其与background属性一起使用。但是，在将字符串用作参数时，我找不到插值字符串的方法url()。

这是我的示例代码：

:root {
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416";
}

body {
    background: url(var(--url));
}

我知道可以使用插值函数在Sass或LESS中轻松完成此操作，但是我很好奇是否有一种无需任何预处理器即可完成此操作的方法。

Question 2

您可以使用大多数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()执行插值。

Question 3

我在Cordova的项目中遇到了相同的问题，所以我使用了：

header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}

显然，如果您在--var声明上使用双引号的url（“”），则该值将无效。