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

Question

我想将我的背景 URL 存储在自定义属性（CSS 变量）中，并将它们与背景属性一起使用。但是，当将字符串用作 url() 中的参数时，我找不到插入字符串的方法。

这是我的示例代码：

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

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

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

原文由 YashArora 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用大多数 CSS 函数执行插值，包括 rgba() （参见 此处 的示例）。实际上，插值是自定义属性的主要功能之一。

But you cannot do this with url() , as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ) , but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot包含括号，除非它们被转义。这意味着实际上不会发生替换，因为解析器永远不会在属性值中看到任何 var() 表达式 - 实际上，您的 background 声明是完全无效的。

如果你什么都不懂，那也没关系。只知道由于遗留原因，您不能使用 var() 插值与 url() 。

即使问题中描述的问题与遗留 url() 令牌有关，您也不能通过从几个 var() 表达式中构建 URL 令牌来做到这一点，以防您想尝试类似于 --uo: url(; --uc: ); 或 --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() 来执行插值。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您不能使用 url 插入 css 变量，但您可以做的是实现 url 函数作为变量的一部分，如下所示：

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

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

在 HTML 中可以是：

 <div class="css_class_setting_background" style=" --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");"> </div>

这适用于大多数现代浏览器。

原文由 André Rodriguez 发布，翻译遵循 CC BY-SA 4.0 许可协议