100

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

这是我的示例代码：

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

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

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

4

4 回答 4

145

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

但是您不能使用 来执行此操作url()，因为url(var(--url))它不是解析为url(函数标记，var(--url)后跟 a )，而是一个url()无效的标记，因为var(--url)被视为 URL 本身，并且url()标记中未引用的 URL 不能包含括号，除非它们被转义. 这意味着替换实际上永远不会发生，因为解析器永远不会var()在属性值中看到任何表达式——事实上，您的background声明是完全无效的。

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

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

于 2017-02-19T18:17:24.207 回答
0

我在 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("")，则该值将不起作用。

于 2019-01-10T16:34:42.603 回答
0

这是适用于 vue3 的解决方案

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

<style>
div {
  background-image: v-bind(backImage );
}
</style>
于 2022-01-21T16:06:35.910 回答
0

您不能使用 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>

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

于 2022-03-03T17:18:01.190 回答