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

我可以在 URL 表达式中插入 CSS 变量吗？

在 CSS 中，自定义属性（也称为 CSS 变量）提供了一种便捷的方法以编程方式存储和修改值。然而，用户在尝试在 URL 函数中插入变量值时可能会遇到限制，例如在背景属性中。

示例：

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

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

不幸的是，这种插值在由于遗留原因， url() 函数。 CSS 解析器不会将 url(var(--url)) 视为单独的标记，而是视为单个无效的 url() 标记。

尽管插值通常可用于 rgba() 等 CSS 函数，但不允许url() 由于潜在的歧义和解析问题。

因此，在自定义属性中显式定义整个 URL 字符串是必要的：

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

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

或者，可以使用 JavaScript 来完成所需的插值。

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