为什么 CSS 变量不能直接在 `url()` 函数中使用？

使用 url() 插入 CSS 变量

自定义属性（CSS 变量）提供了一种存储和重用样式值的有效方法。然而，用户在尝试在 url() 函数中插入这些变量时遇到了挑战。

为什么 CSS 变量不能用 url() 插入？

尽管像 rgba() 这样的 CSS 函数具有插值功能，但 url() 却是一个明显的例外。出现此问题的原因是解析器将 url(var(--url)) 解释为单个无效的 url() 标记，而不是函数调用。这会阻止 var() 表达式被求值并导致无效的后台声明。

遗留原因

无法在 url() 中插入变量可以归因于由于遗留原因。 url() 标记的解析保持不变，以保持与早期 CSS 版本的向后兼容性。

替代解决方案

虽然 url() 不可能进行变量插值，但有是实现类似效果的替代方法：

1. 定义 URL自定义属性中的表达式： 不要在 url() 函数中插入变量，而是将整个 URL 指定为自定义属性。例如：

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

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

2. 使用 JavaScript： 使用 JavaScript，您可以从 CSS 变量动态创建 url() 表达式，并使用 background 属性应用它。

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