Wie kann ich SVG-Füllfarben ändern, wenn ich sie als Hintergrundbilder verwende?

SVG-Füllfarben als Hintergrundbilder ändern

Wenn Inline-SVG-Elemente verwendet werden, kann CSS verwendet werden, um Füllfarben einfach zu ändern. Diese Methode ist jedoch nicht anwendbar, wenn SVGs als Hintergrundbilder verwendet werden. Um dieser Herausforderung zu begegnen, sollten Sie CSS-Masken nutzen.

Mit der Eigenschaft „Maske“ können Sie eine Maske erstellen, die einem Element auferlegt wird. Durch die Verwendung dieser Eigenschaft können Sie die SVG-Datei als Maskenbild angeben, wie unten gezeigt:

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

Bei diesem Ansatz wird die Hintergrundfarbe des Elements auf Rot gesetzt und die SVG-Datei dient als eine Maske, die die Füllfarben der SVG-Formen entsprechend ändert. Weitere Einblicke in diese Technik finden Sie im folgenden Artikel: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Das obige ist der detaillierte Inhalt vonWie kann ich SVG-Füllfarben ändern, wenn ich sie als Hintergrundbilder verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!