Practical practice of efficient CSS development: CSS 3, LESS, SASS, Bootstrap, Foundation Reading Notes (2) CSS3 uses layer overlay to achieve multiple backgrounds_html/css_WEB-ITnose

CSS 3 allows you to set multiple background images. Each background image occupies one layer. The upper and lower layers are determined according to the order written in CSS. The background written first is on the top layer. Each layer of image is defined using separated by commas.

For example, the following code:

background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,  url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;

As you can see from the code, each picture can have its own displacement set , size, and whether to repeat. If there is overlap, the picture written in front will be covered on the top layer.

The effect of multiple backgrounds is shown in Figure 5.4.

Finally, here is a picture of the cover of the book. Let’s share it with those who want to learn.