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

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

下面是我的示例代码:

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


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

我知道这可以很容易地做到在 Sass 或更少使用插值函数，但我很好奇，如果有一种方法来做到这一点，没有任何预处理器。

49889 次浏览
小开
最佳答案

您可以使用大多数 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);的东西。这是因为 自定义属性不能包含不匹配的字符串分隔符或部分 url()令牌(称为坏 URL 令牌)。

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

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


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

或者，使用 JavaScript 代替 var()来执行插值。

小开

我在科尔多瓦的一个项目中遇到了同样的问题，所以我用了:

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

小开

下面是在 vue3中工作的解决方案

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


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

You cannot interpolate css variables with url but what you can do is to implement the url function as part of your variable like this:

: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>

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


提交答案