有没有办法用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（“”），则该值将无效。