有没有办法用url（）插入CSS变量？

Question

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

这是我的示例代码：

:root {

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

}

body {

    background: url(var(--url));

}

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

Answer 1

我在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（“”），则该值将无效。