Introduction to using svg in CSS background images (with examples)

This article brings you an introduction to the use of svg in CSS background images (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When using SVG in CSS background images, you can use many features of the css background attribute, such as image size and image position, etc. It is very easy to control the size of the image according to the size of the device. Another advantage is that you do not need to insert SVG images into the html, thus keeping the html clean.

Using SVG in CSS background images has many advantages and is also very helpful in improving performance. So when using SVG in a CSS background image, is there any way to change its color? Read on.

CSS mask

Use mask in CSS to change the background color. This method is simple and practical. The important thing is that browsers now support it more and more. good. The mask attribute can be used to create a mask based on the outline of the element. Using the mask can only display the area of ​​the specified image content, while the area outside the image area is hidden. The following is how to use it:

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

mask also has many attributes, such as mask-position, mask-repeat and mask-size, which are similar to the corresponding attributes of background images in CSS, and You can use abbreviated syntax like background:

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

Browser support for masks is getting better and better. You can check the support of various browsers through the following address:

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

In addition, if it is not limited to If you modify it in css, you can directly modify the svg source file

Drag the svg image into the editor to see the svg source code

<?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>

Directly find the fill inside Just modify the color value in the attribute

The above is the detailed content of Introduction to using svg in CSS background images (with examples). For more information, please follow other related articles on the PHP Chinese website!