Comment puis-je modifier la couleur de remplissage d'une image d'arrière-plan SVG à l'aide de CSS ?

Comment modifier la couleur de remplissage d'une image SVG en tant qu'image d'arrière-plan

Lors de l'intégration d'une image SVG en ligne, vous pouvez facilement modifier ses couleurs de remplissage à l'aide de CSS. Cependant, cette technique devient problématique lorsque le SVG est servi comme image de fond.

Cette question répond à la nécessité de modifier les attributs de remplissage d'un SVG utilisé comme image de fond. Le SVG en question contient une étoile et un cercle avec des couleurs de remplissage spécifiques.

La solution réside dans l'implémentation de masques CSS. La propriété mask crée un masque appliqué à un élément. L'image du masque est définie sur l'URL du fichier SVG. En appliquant le masque à l'élément souhaité, vous pouvez modifier efficacement les couleurs de remplissage du SVG intégré.

Le code CSS suivant montre comment utiliser les masques :

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

Dans cet exemple, la classe .icon aura un fond rouge et le masque SVG sera appliqué, modifiant les couleurs de remplissage du SVG.

Pour plus d'informations sur cette technique, 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!