将 SVG 用作背景图像时如何更改它们的填充颜色？

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

使用内联 SVG 元素时，可以利用 CSS 轻松修改填充颜色。但是，当使用 SVG 作为背景图像时，此方法不适用。为了应对这一挑战，请考虑利用 CSS 遮罩。

“mask”属性允许您建立强加于元素的遮罩。通过使用此属性，您可以指定 SVG 文件作为遮罩图像，如下所示：

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

通过这种方法，元素的背景颜色设置为红色，SVG 文件用作遮罩，相应地修改 SVG 形状的填充颜色。有关此技术的更多见解，请参阅以下文章：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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