我需要将图像传递到 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 Code 中出现语法错误
.tinted-image {
height: 125px;
background: linear-gradient(to right, var(--color), var(--color2)),
url(var(--url));
}
最佳答案
您可以像下面这样使用它:
: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 Explorer 上不起作用。您可以在这里找到所有支持 CSS 变量的浏览器:https://caniuse.com/#feat=css-variables
关于html - 如何在后台 URL 中传递 CSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54852422/