CSS 变量可以在 `url()` 函数中使用吗？

CSS 变量可以用 url() 进行插值吗？

尽管 CSS 变量被广泛使用，但在插值方面仍然存在限制它们在 url() 函数中。此限制源于 url() 标记的遗留性质。

在现代 CSS 中，自定义属性的插值是一项基本功能。它允许将动态值插入到各种函数中，例如 rgba()。但是， url() 函数是此规则的一个例外。

当使用 url(var(--url)) 时，解析器将其解释为单个 url() 标记，而不是一个 url() 函数标记和一个变量表达式。因此，变量本身被视为 URL，从而导致插值无效。

要避免此问题，请避免在 url() 中从多个变量表达式构造 URL 标记。这包括诸如 --uo: url(; --uc: ); 之类的方法和背景：var(--uo) var(--url) var(--uc);。自定义属性不能包含不匹配的字符串分隔符或 url() 标记的一部分。

对于背景，解决方案在于在自定义属性中指定完整的 url() 表达式并直接替换它：

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

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

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

以上是CSS 变量可以在 `url()` 函数中使用吗？的详细内容。更多信息请关注PHP中文网其他相关文章！