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

Question

我想将我的背景 URL 存储在自定义属性（CSS 变量）中并将它们与背景一起使用属性。但是，在 url().

中将字符串用作参数时，我找不到插入字符串的方法

这是我的示例代码：

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

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

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

Answer 1

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

但是您不能使用 url() 执行此操作，因为 url(var(--url)) 未被解析为 url( 函数标记后跟 var(--url) 后跟 ) ，但单个 url() 标记无效，因为 var(--url) 本身被视为 URL，并且 url() 标记中未加引号的 URL 不能包含括号除非他们逃脱了。这意味着替换从未真正发生，因为解析器从未在属性值中看到任何 var() 表达式——实际上，您的 background 声明是完全无效的。

如果您不理解其中任何一个，那也没关系。只知道由于遗留原因，您不能将 var() 插值与 url() 一起使用。

即使问题中描述的问题与遗留 url() 令牌有关，您也不能通过从几个 var() 表达式中构建 URL 令牌来做到这一点，以防万一您正在考虑尝试 --uo: url(; --uc: ); 或 --uo: url("; --uc: "); 和 background: var(--uo) var(--url) var(--uc);。这是因为 custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

如果要在自定义属性中指定 URL，则需要写出整个 url() 表达式，然后替换整个表达式：

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

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

或者，使用 JavaScript 而不是 var() 来执行插值。

Answer 2

我在使用 Cordova 的项目中遇到了同样的问题，所以我使用了：

header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}

显然，如果您在 --var 声明中使用带双引号的 url("")，则值将不起作用。

Answer 3

这是适用于 vue3 的解决方案

<script setup>
const backImage = ref("url(/img/imImage.webp)")
</script>

<style>
div {
  background-image: v-bind(backImage );
}
</style>

Answer 4

你不能用 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>

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

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

Is there a way to interpolate CSS variables with url()?

css

css-variables