Introduction à l'utilisation de svg dans les images d'arrière-plan CSS (avec exemples)

Cet article vous apporte une introduction à l'utilisation de svg dans les images d'arrière-plan CSS (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsque vous utilisez SVG dans des images d'arrière-plan CSS, vous pouvez utiliser de nombreuses fonctionnalités de l'attribut d'arrière-plan CSS, telles que la taille et la position de l'image, etc. Il est très simple de contrôler la taille de l'image en fonction de la taille de l'appareil. Un autre avantage est que vous n'avez pas besoin d'insérer d'images SVG dans le HTML, gardant ainsi le HTML propre.

L'utilisation de SVG dans les images d'arrière-plan CSS présente de nombreux avantages et est très utile pour améliorer les performances. Ainsi, lorsque vous utilisez SVG dans une image d’arrière-plan CSS, existe-t-il un moyen de changer sa couleur ? Continuez à lire.

Masque CSS

Utiliser un masque en CSS pour changer la couleur d'arrière-plan Cette méthode est simple et pratique. L'important est que les navigateurs la supportent désormais davantage. et en plus bien. L'attribut masque peut être utilisé pour créer un masque basé sur le contour de l'élément. L'utilisation du masque ne peut afficher que la zone du contenu de l'image spécifié, tandis que la zone en dehors de la zone de l'image est masquée. Voici comment l'utiliser :

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

mask possède également de nombreux attributs, tels que Mask-position, Mask-repeat et Mask-Size, qui sont similaires aux attributs correspondants des images d'arrière-plan en CSS. vous pouvez également utiliser une syntaxe abrégée comme background :

.icon {
background-color: red;
-webkit-mask: url(icon.svg) no-repeat 50% 50%;
mask: url(icon.svg) no-repeat 50% 50%;
}

La prise en charge des masques par le navigateur s'améliore également de plus en plus. Vous pouvez vérifier le support des différents navigateurs via l'adresse suivante :

https://caniuse.com/#search=mask-image

De plus, s'il n'est pas limité à Si vous le modifiez en CSS, vous pouvez directement modifier le fichier source svg

Faites glisser l'image svg dans l'éditeur et vous pourrez voir le code source svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " 
<svg t="1540202401705" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10044" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css">
</style>
</defs>
<path d="M279.374 707.763C95.265 506.544 42.467 264.487 159.2 156.707c25.227-23.275 56.897-38.54 93.597-45.297 2.592-1.037 5.277-1.942 8.07-2.655 0.198-0.045 1.495-0.365 1.68-0.408 59.18-13.637 130.407 48.272 165.687 144.012 23.017 62.442 24.332 123.377 3.53 163.005-11.057 21.047-27.832 34.98-48.965 40.377-0.02 0.003-2.212 1.172-2.77 2.32-0.783 1.592-0.962 6.665 2.945 15.852 19.252 27.482 40.742 54.21 63.895 79.52 25.195 27.52 52.245 53.215 80.43 76.365 0.31 0.215 0.61 0.415 0.905 0.605 4.695 3.365 7.18 2.79 8.37 2.515 4.165-0.96 8.635-4.73 11.22-7.415 9.725-22.71 30.73-38.74 59.715-45.42 38.985-8.985 89.81-0.715 139.445 22.675 91.08 42.95 141.545 117.275 125.25 175.335-1.455 5.185-1.59 5.735-3.045 10.795-12.07 32.925-28.38 62.875-52.92 85.53-22.97 21.21-51.175 35.765-83.845 43.29l0.01 0C603.518 947.402 421.466 863.038 279.374 707.763zM593.493 646.688c-0.81 2.37-1.985 4.605-3.45 6.62-1.695 2.335-17.295 22.88-42.175 28.61-15.69 3.62-31.43 0.69-45.74-8.44-1.533-0.8-3-1.76-4.372-2.875-30.892-25.18-60.482-53.175-87.98-83.22-25.205-27.545-48.562-56.715-69.445-86.67-0.858-1.237-1.603-2.547-2.223-3.902-10.597-23.097-11.705-43.572-3.283-60.812 11.04-22.607 33.825-28.61 35.955-29.1 2.455-0.63 9.96-2.538 16.465-14.92 13.862-26.42 11.43-74.4-6.2-122.215-26.652-72.335-78.575-119.007-107.682-112.3-1.145 0.31-2.235 0.76-3.292 1.245-1.905 0.835-3.908 1.427-5.962 1.795-28.062 4.72-52.137 15.965-70.785 33.152-92.912 85.777-36.505 305.654 123.165 480.141 128.205 140.11 294.584 220.249 404.619 194.895 24.03-5.535 44.56-16.025 61.01-31.225 18.15-16.77 32.815-41.595 40.6-66.98 0.66-2.145 1.52-4.81 2.645-9 7.385-27.38-31.775-81.15-99.855-113.23-39.045-18.405-78.925-25.57-106.715-19.17C609.268 631.288 597.133 636.113 593.493 646.688zM653.488 446.834c-14.005 0.62-25.87-10.2-26.49-24.205-0.46-10.005-4.775-19.232-12.165-25.96-7.385-6.755-16.96-10.222-26.96-9.772-13.995 0.645-25.865-10.195-26.495-24.2-0.64-14.005 10.175-25.857 24.195-26.505 23.545-1.075 46.09 7.105 63.49 22.987 17.395 15.902 27.565 37.622 28.63 61.155 0.56 12.43-7.91 23.19-19.62 25.885C656.598 446.559 655.053 446.761 653.488 446.834zM736.648 425.799c-14 0.643-25.87-10.195-26.505-24.205-2.59-57.415-51.405-102.017-108.83-99.427-13.985 0.642-25.86-10.202-26.485-24.185-0.635-14.002 10.245-25.867 24.205-26.502 85.375-3.865 157.965 62.455 161.81 147.842 0.57 12.425-7.905 23.162-19.615 25.86C739.753 425.524 738.208 425.726 736.648 425.799zM838.598 430.764c-14.01 0.62-25.865-10.225-26.5-24.21-2.6-57.475-27.425-110.5-69.9-149.322-42.48-38.8-97.53-58.742-155-56.137-14.005 0.62-25.87-10.2-26.5-24.205-0.625-14.007 10.23-25.865 24.2-26.5 71.025-3.21 139.045 21.425 191.529 69.377 52.495 47.947 83.165 113.467 86.37 184.492 0.555 12.432-7.915 23.17-19.62 25.867C841.693 430.466 840.168 430.686 838.598 430.764z" p-id="10045" fill="red"></path>
</svg>

Directement trouvez le fill Modifiez simplement la valeur de couleur dans l'attribut

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!