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

修改 SVG 背景图像中的填充颜色

使用 CSS 将 SVG 合并为背景图像时，能够直接修改其填充属性通过CSS 是有限的。以下是在这种情况下更改填充颜色的解决方案：

CSS 蒙版

CSS 蒙版允许您创建应用于元素的蒙版。要将此技术用于 SVG，请按照以下步骤操作：

1. 将 SVG 放入单独的文件中，例如“icon.svg”。
2. 在您要使用的元素上使用 mask 属性想要将 SVG 背景应用到：

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

这将使用 SVG 的形状创建一个遮罩并将其应用于具有 .icon 类的元素。

注意：

• 元素的背景颜色用作 SVG 的填充颜色。
• 此技术掩盖了 SVG 并影响整个图像。要选择性地修改 SVG 中的特定形状，您可以使用 CSS 选择器来定位它们。

更多信息：

在 CSS 中为 SVG 着色的优秀资源背景图像可在以下位置获取： https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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