Comment puis-je modifier les couleurs de remplissage SVG lorsque je les utilise comme images d'arrière-plan ?

Modification des couleurs de remplissage SVG en tant qu'images d'arrière-plan

Lorsque des éléments SVG en ligne sont utilisés, CSS peut être utilisé pour modifier facilement les couleurs de remplissage. Cependant, cette méthode n'est pas applicable lorsque les SVG sont utilisés comme images d'arrière-plan. Pour relever ce défi, pensez à tirer parti des masques CSS.

La propriété 'mask' vous permet d'établir un masque qui est imposé à un élément. En utilisant cette propriété, vous pouvez spécifier le fichier SVG comme image de masque, comme démontré ci-dessous :

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

Avec cette approche, la couleur d'arrière-plan de l'élément est définie sur rouge et le fichier SVG sert de un masque, en modifiant les couleurs de remplissage des formes SVG en conséquence. Pour plus d'informations sur cette technique, reportez-vous à l'article suivant : 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!