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