相关疑难解决方法(0)

我想将我的后台URL存储在自定义属性(CSS变量)中,并将它们与background属性一起使用.但是,在将字符串用作参数时,我无法找到插入字符串的方法url().

这是我的示例代码:

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

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

我知道这可以使用插值函数在Sass或LESS中轻松完成,但我很好奇是否有办法在没有任何预处理器的情况下完成.

我试图在我的 SVG（它被设置为背景图像）中使用 CSS 变量作为填充颜色，但我很难让它工作。它显示默认黑色，但是当我检查它时，我可以看到 css 变量在那里并显示我想要的颜色。

HTML

<div class="test">
  Testing the css variable color
</div>

<div class="icon">

</div>

CSS

:root {
  --primary-color: hsl(332, 61%, 78%);
}

div {
  width: 100px;
  height: 100px; 
}

.test {
  background: var(--primary-color);
}

.icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129'%3E%3Cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='var(--primary-color)' /%3E%3C/svg%3E");
}

这是一个要检查的代码笔！

我在这里看到了在 SVG 中使用了 CSS 变量，但我不确定是否可以处理背景图像？我是使用 SVG 和 CSS 变量的新手，所以我不确定我是否做错了什么......希望了解为什么它不能正确呈现颜色！