将 css 变量用于背景图像以更改颜色

如何解决将 css 变量用于背景图像以更改颜色

我想将我的 CSS 变量用于更改 SVG 的填充属性的背景图像。

:root{
  --primary: red;
}

input {
  background-image: url('data:image/svg+xml,<svg    fill="var(--primary)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/></svg>');
  background-position: right center;
  background-repeat: no-repeat;
}

<input type="text>

解决方法

不幸的是，您不能更改 svg Long l=(myMap.get("abc")!=null)?myMap.get("abc"):0L; /fill 属性，如果用作 stroke。仅当 background-image 作为代码位于 HTML 中时，您才能执行此操作。

,

也许没有那么优雅，但你可以做这样的事情。

:root{
  --red: url('data:image/svg+xml,<svg fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/></svg>');
  --blue: url('data:image/svg+xml,<svg fill="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/></svg>');
  --primary: var(--red);
}

input {
  background-image: var(--primary);
  background-position: right center;
  background-repeat: no-repeat;
}

<input type="text">