Wie ändere ich die Füllfarben von SVG-Hintergrundbildern mit CSS?

So ändern Sie Füllfarben von SVG-Hintergrundbildern

Inline kann CSS SVG-Füllfarben problemlos ändern. Das Ändern von Füllattributen, wenn eine SVG-Datei als Hintergrundbild verwendet wird, stellt jedoch eine Herausforderung dar.

So erreichen Sie dies mithilfe von CSS-Masken:

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

Dadurch wird eine Maske basierend auf den bereitgestellten erstellt SVG-Bild und wendet es auf das angegebene Element an. Folglich wird die Hintergrundfarbe des Elements durch die Füllattribute der SVG-Datei beeinflusst.

Weitere Einzelheiten finden Sie in diesem aufschlussreichen Artikel: https://codepen.io/noahblon/post/coloring-svgs-in-css- Hintergrundbilder

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