时间戳

首页 > 解决方案 > 在背景图像中使用 css 变量来改变颜色

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>

标签： csssvgbackground-image

解决方案

不幸的是，您无法更改 svg fill/stroke属性，如果用作background-image. 只有svg在 HTML 中作为代码才能执行此操作。

推荐阅读