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

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

Lors de l'incorporation d'un SVG comme image d'arrière-plan à l'aide de CSS, la possibilité de modifier directement ses attributs de remplissage via CSS est limité. Voici une solution pour modifier les couleurs de remplissage dans ce scénario :

Masques CSS

Les masques CSS vous permettent de créer un masque appliqué à un élément. Pour utiliser cette technique pour les SVG, suivez ces étapes :

1. Placez le SVG dans un fichier séparé, tel que "icon.svg".
2. Utilisez la propriété masque sur l'élément que vous souhaitez appliquer l'arrière-plan SVG à :

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

Cela crée un masque en utilisant la forme du SVG et l'applique à l'élément avec l'icône . classe.

Remarque :

• La couleur d'arrière-plan de l'élément sert de couleur de remplissage pour le SVG.
• Cette technique masque le SVG et affecte l'ensemble de l'image. Pour modifier sélectivement des formes spécifiques dans le SVG, vous pouvez les cibler à l'aide de sélecteurs CSS.

Pour plus d'informations :

Une excellente ressource pour colorer les SVG en CSS les images d'arrière-plan sont disponibles 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!