Wie kann ich die Füllfarbe eines SVG-Hintergrundbilds mithilfe von CSS ändern?

So ändern Sie die Füllfarbe eines SVG-Bilds als Hintergrundbild

Beim Einbetten eines SVG-Bilds inline können Sie dessen Füllfarben einfach mithilfe von CSS ändern. Diese Technik wird jedoch problematisch, wenn die SVG-Datei als Hintergrundbild dient.

Diese Frage befasst sich mit der Notwendigkeit, die Füllattribute einer SVG-Datei zu ändern, die als Hintergrundbild verwendet wird. Das betreffende SVG enthält einen Stern und einen Kreis mit bestimmten Füllfarben.

Die Lösung liegt in der Implementierung von CSS-Masken. Die Maskeneigenschaft erstellt eine Maske, die auf ein Element angewendet wird. Das Maskenbild wird auf die URL der SVG-Datei eingestellt. Durch Anwenden der Maske auf das gewünschte Element können Sie die Füllfarben der eingebetteten SVG-Datei effektiv ändern.

Der folgende CSS-Code zeigt, wie Masken verwendet werden:

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

In diesem Beispiel Die .icon-Klasse hat einen roten Hintergrund und die SVG-Maske wird angewendet, wodurch die Füllfarben der SVG geändert werden.

Weitere Einblicke in diese Technik 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 die Füllfarbe eines SVG-Hintergrundbilds mithilfe von CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!