如何使用 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中文網其他相關文章！