CSS sprites multiple images on a single image

First, what is CSS sprites

CSS sprites literal translation is the CSS Wizard. This is often interpreted as "CSS image flattening" or "CSS mapping positioning". In fact, it is through the integration of multiple images into a picture, and then through the CSS background background positioning technology Skills Layout page background. The advantages of this is also obvious, because more pictures, will increase the HTTP request, undoubtedly prompted the performance of the site, especially the image of the site, if you can use CSS sprites reduce the number of pictures, will bring the speed of ascension.

CSS Sprites is what the popular explanation: CSS sprites is actually the page of some background image integration into a picture, and then use the div CSS "Background-image", "Background-repeat", " Background-position "combination of background positioning, background-position can be used to accurately locate the background image in the Layout box object position.

Second, fit and not fit div CSS Sprites flattening layout

1, suitable for: General small icon Material
Small icon ico class footage, general icons very small 10 pixels dozens of pixels width height, this fit to flatten into a picture to achieve sprites background background positioning layout. Multiple ico too much naturally loading a webpage instantly consumes a few HTTP IIS links, but it will be released shortly after loading.

2, not suitable: big picture big background
The background is generally used for Web pages, and when flattened, all backgrounds are displayed when set to a Web page background. Large image stitching will increase the size of the image, network bandwidth is poor visitors to the large file due to the background map loading slightly slower, so the large map is not recommended splicing to use CSS sprites background positioning layout.

3, sprites suitable recommendation summary
Generally this sprites flattening layout is used for local small box layouts that are not suitable for large background large layout backgrounds. such as small local layout small icon background, small navigation background, such as divcss layout.

Third, div CSS sprites advantages and disadvantages of the choice of judgment

1, Sprites Advantages:
Several small icons are flattened into a post-graph layout, reducing the number of HTTP IIS requests, which is obvious to the big-traffic web site, thereby cloaking the site's performance. For the large-traffic site, the number of HTTP requests is more valuable, using div+css sprites This can greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason, but also reduce the number of picture files.

2, Sprites shortcomings
In the picture merger, you want to put more than one picture in an orderly and reasonable combination into a picture, but also to leave a good enough space, to prevent the plate does not appear in the unnecessary background, if the space or flattened position is not appropriate, in the layout is prone to layout this box object, set the background to appear flattened adjacent pictures, interference picture situation;

CSS sprites in the development of the trouble, you have to use Photoshop (PS) or other tools to measure the precise location of each background unit, this is needlework, no difficulty, but very cumbersome;

CSS sprites in the maintenance of trouble, sprites is a general double-edged sword, if the page background has a little change, generally want to change this merged picture, do not need to change the place best not move, so avoid changing more CSS, if in the original place, there can only (best) add pictures, This increases the number of bytes in the picture, because every time the picture changes to the image to delete or add content, it seems a little cumbersome, and re-calculate the location of the picture (especially the thousands of PX diagram) is a rather uncomfortable thing

Because the position of the picture needs to be fixed to an absolute value, the flexibility such as center is lost.

3, DIVCSS5 recommended summary
Hesitation Stitching pictures need some experience skills (to do the practice can be quickly mastered), measurement positioning values, modification is not so flexible, such as the general small site, small traffic sites, general corporate website is not recommended to use CSS Sprites, because the use of CSS Sprites is more time-consuming and energy-intensive than a single background picture layout, so it's not recommended. But this layout technique also has to learn to master the flexible layout is the purpose. Small station HTTP requests rich this stitching actually does not come up with what advantages instead of wasting valuable time. On the contrary Big website Big traffic website recommend use, this is worth more.

Four, CSS sprites instances

Sprites Case Picture material:

Instance code:

<! DOCTYPE html>{margin:5px; }. Sprites span{float: Left;width:20px;Height:20px;Background-image:URL (sprite.png);background-size:60px 40px; }. Sprites1{background-position:0 0; }. Sprites2{background-position:-20px 0; }. Sprites3{background-position:0-20px; }. Sprites4{background-position:-20px-20px; }. SPRITES5{background-position:-40px 0; }. Sprites6{background-position:-40px-20px; }</style>

Sprites instance effect:

Note: The background background-position has two values, the previous one represents the left distance value (can be positive negative), the second value represents the upper distance value (can be positive negative). When positive, represents the background picture as the object box background picture when the left and how much distance to start to display the background picture, when the negative is a background picture as a box object background picture, drag the background picture beyond the box object to the left how far, drag beyond the top of the box object to start showing this background picture.

CSS sprites multiple images on a single image