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

Füllfarben in SVG-Hintergrundbildern ändern

Beim Einbinden einer SVG-Datei als Hintergrundbild mit CSS besteht die Möglichkeit, ihre Füllattribute direkt zu ändern durch CSS ist begrenzt. Hier ist eine Lösung zum Ändern von Füllfarben in diesem Szenario:

CSS-Masken

Mit CSS-Masken können Sie eine Maske erstellen, die auf ein Element angewendet wird. Um diese Technik für SVGs zu verwenden, befolgen Sie diese Schritte:

1. Platzieren Sie die SVG-Datei in einer separaten Datei, z. B. „icon.svg“.
2. Verwenden Sie die Maskeneigenschaft für das von Ihnen verwendete Element Ich möchte den SVG-Hintergrund anwenden auf:

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

Dadurch wird eine Maske mit der SVG-Form erstellt und auf das Element mit dem .icon angewendet Klasse.

Hinweis:

• Die Hintergrundfarbe des Elements dient als Füllfarbe für das SVG.
• Diese Technik maskiert die SVG und wirkt sich auf das gesamte Bild aus. Um bestimmte Formen innerhalb der SVG-Datei selektiv zu ändern, können Sie sie mithilfe von CSS-Selektoren gezielt ändern.

Weitere Informationen:

Eine hervorragende Ressource zum Färben von SVGs in CSS Hintergrundbilder sind verfügbar unter: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Das obige ist der detaillierte Inhalt vonWie kann ich die Füllfarben eines SVG-Hintergrundbilds mithilfe von CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!