將 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中文網其他相關文章！