CSS 变量可以使用 `url()` 函数进行插值吗？

使用 CSS 变量插值

CSS 变量可以使用 url() 函数插值吗？

自定义 CSS 属性有助于大多数函数的插值，包括 rgba()。然而，由于遗留原因，使用 url() 进行插值会带来挑战。

url() 的限制是什么？

url() 令牌不能拆分为var() 表达式，因为解析器将 var(--url) 视为不带引号的 URL。因此，插值不会发生，导致后台声明无效。

替代方法

为了避免 url() 限制，可行的选项包括：

• 在自定义中指定整个 url() 表达式property:

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

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

• 使用 JavaScript 进行插值而不是 var()。

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