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

Directly find thefill insideJust 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!