有没有办法用url()插入CSS变量？

Question

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

这是我的示例代码:

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

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

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

Answer 1

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