Comment puis-je modifier les couleurs de remplissage SVG lorsqu'il est utilisé comme image d'arrière-plan ?

Modification des couleurs de remplissage SVG dans les images d'arrière-plan

L'intégration des sorties SVG directement dans le code de la page permet une modification CSS sans effort des couleurs de remplissage. Cependant, ce processus devient plus difficile lorsque le SVG est servi comme image d'arrière-plan à l'aide de la propriété background-image de HTML.

Approche alternative : masques CSS

Pour contourner cette limitation , les masques CSS apportent une solution. En utilisant la propriété mask, les développeurs peuvent créer et appliquer des masques à des éléments, masquant ainsi efficacement des zones spécifiques. Le code suivant illustre son application :

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

Cette approche permet aux utilisateurs de modifier les couleurs de remplissage des images SVG utilisées comme images d'arrière-plan en modifiant les attributs de remplissage dans le fichier SVG lui-même.

Pour Pour plus d'informations et d'exemples, reportez-vous à l'article complet sur https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!