CSS Sprites-website CSS Background Image Positioning

This technique has been widely used in front-end development of current pages. Even Yui sets it as the first criterion "make fewer HTTP requests" in "14 guidelines for improving webpage efficiency ", the importance of this technology is also the recommendation of Yui.
This CSS technique has been widely promoted and applied.

Let's take a look at the simplest Demo:
This is the background image:

This is a simple demo of CSS Sprites:

 

XML/html code: <br/> <Div style = "" float: Left; "mce_style =" "float: Left;" width: 120px; padding-left: 20px; background: url(ico.png) Left top no-repeat "> Red Cross </div> <br/> <Div style =" "float: Left;" mce_style = "" float: left; "width: 120px; padding-left: 20px; Background: url(ico.png) left-32px no-repeat "> green check box </div> <br/> <Div style =" "float: Left;" mce_style = "" float: left; "width: 120px; padding-left: 20px; Background-image: url(ico.png); background-position: Left top; Background-repeat: no-repeat "> Red Cross </div> <br/> <Div style =" "float: Left;" mce_style = "" float: Left; "width: 120px; padding-left: 20px; Background-image: url(ico.png); background-position: 0-32px; Background-repeat: No-repeat "> green check box </div> 

CSS Sprites principles
CSS Sprites is actually to integrate some background images in the webpage into an image file, and then use CSS's "background-image", "background-repeat ", the combination of "background-position" to locate the background. The background-position can be used to precisely locate the background image position.

 
Advantages of CSS Sprites
1. the use of CSS Sprites can effectively reduce HTTP requests for webpages and greatly improve the page performance. This is also the biggest advantage of CSS Sprites and is also the main reason for its wide spread and application;
2. I personally think that CSS Sprites can reduce the size of the image. I have compared the size of the three images that are merged into one image multiple times to be smaller than the total size of the three images.

 

Disadvantages of CSS Sprites
It is true that CSS Sprites is so powerful, but there are also some shortcomings that cannot be ignored.
1. when merging images, You need to combine multiple images into one image in an orderly and reasonable manner, and leave enough space to avoid unnecessary background in the Section, what is painful is the Adaptive Page under a wide screen or high-resolution screen. If your picture is not wide enough, it is easy to break the background;