Wie kann ich SVG-Füllfarben ändern, wenn ich es als Hintergrundbild verwende?

SVG-Füllfarben in Hintergrundbildern ändern

Die direkte Einbindung von SVG-Ausgaben in den Seitencode ermöglicht eine mühelose CSS-Änderung von Füllfarben. Dieser Prozess wird jedoch schwieriger, wenn das SVG mithilfe der HTML-Eigenschaft „Hintergrundbild“ als Hintergrundbild bereitgestellt wird.

Alternativer Ansatz: CSS-Masken

Um diese Einschränkung zu umgehen , CSS-Masken bieten eine Lösung. Mithilfe der Maskeneigenschaft können Entwickler Masken erstellen und auf Elemente anwenden und so bestimmte Bereiche effektiv verdecken. Der folgende Code veranschaulicht seine Anwendung:

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

Dieser Ansatz ermöglicht es Benutzern, die Füllfarben von SVG-Bildern zu ändern, die als Hintergrundbilder verwendet werden, indem sie die Füllattribute innerhalb der SVG-Datei selbst ändern.

Für Weitere Erkenntnisse und Beispiele finden Sie im ausführlichen Artikel unter 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 es als Hintergrundbild verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!