如何使用 CSS 更改 SVG 背景图像的填充颜色？

如何修改 SVG 图像作为背景图像的填充颜色

内嵌 SVG 图像时，您可以使用 CSS 轻松修改其填充颜色。但是，当 SVG 用作背景图像时，此技术会出现问题。

此问题解决了修改用作背景图像的 SVG 的填充属性的需要。有问题的 SVG 包含一个星形和一个具有特定填充颜色的圆圈。

解决方案在于实现 CSS 遮罩。 mask 属性创建应用于元素的遮罩。遮罩图像设置为 SVG 文件的 URL。通过将遮罩应用到所需的元素，您可以有效地修改嵌入的 SVG 的填充颜色。

以下 CSS 代码演示了如何使用遮罩：

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

在此示例中， .icon 类将具有红色背景，并且将应用 SVG 蒙版，修改 SVG 的填充颜色。

要进一步了解此技术，请参阅综合文章位于：

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

以上是如何使用 CSS 更改 SVG 背景图像的填充颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！