Question

我想将自己的后台网址存储在自定义属性（CSS变量）中，并将它们与background属性一起使用。但是，在url()中将其用作参数时，我无法找到插入字符串的方法。

以下是我的示例代码：

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

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

我知道这可以使用插值函数在Sass或LESS中轻松完成，但我很好奇是否有办法在没有任何预处理器的情况下完成。

Answer 1

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

但您无法使用url()执行此操作，因为url(var(--url))不会被url(函数令牌解析，后跟var(--url)后跟)，但单个url()令牌无效，因为var(--url)被视为URL本身，url()令牌中的未加引号的网址除非被转义，否则不能包含括号。这意味着替换永远不会发生，因为解析器永远不会在属性值中看到任何var()表达式 - 实际上，您的background声明完全无效。

如果你不明白这一点，那没关系。只是知道由于遗留原因，您无法使用var()插值url()。

即使问题中描述的问题与遗留url()令牌有关，但是如果您正在考虑尝试某些内容，则无法通过从多个var()表达式构建URL令牌来实现此目的例如--uo: url(; --uc: );或--uo: url("; --uc: ");和background: var(--uo) var(--url) var(--uc);。这是因为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()来执行插值。

Answer 2

我在与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（“”）用作注释，则该值将无效。

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

2 个答案: