如何在后台URL中传递CSS变量

Question

我需要将一个图像传递给CSS背景，就像这样--它的工作原理是：

.tinted-image {
  height: 125px;
  background: linear-gradient(to right, var(--color), var(--color2)),
    url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}

但是，当我尝试这样做时，我会在VS代码中出现语法错误

.tinted-image {
      height: 125px;
      background: linear-gradient(to right, var(--color), var(--color2)),
        url(var(--url));
    }

Answer 1

您可以像下面这样使用它：

​

:root {
  --color: rgba(255, 0, 0, 0.5);
  --color2: rgba(0, 255, 0, 0.5);
  --url: url(https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg);
}
.tinted-image {
  height: 125px;
  background: linear-gradient(to right, var(--color), var(--color2)), var(--url);
  width: 200px;
}

<div class="tinted-image"></div>

​

CSS变量在Internet上不起作用。您可以在这里找到所有支持CSS变量的浏览器：https://caniuse.com/#feat=css-variables