CSS Sprites generally only use the fixed-size box (box) inside, so as to block the part should not see.
1. Advantages
1, using CSS Sprites can well reduce the http requests a web page, thus greatly improving the performance of a page, which is the biggest advantage Sprites CSS, which is also the main reason for the wide dissemination and applications;
2, CSS Sprites can reduced byte of the picture, have repeatedly compared the three images into one image byte is always less than the sum of these three bytes of the picture.
3, to solve the problems on the web designer in picture naming, just a collection of pictures Last name on it, do not need to be named for every little element, thereby improving the production efficiency of the web page.
4, convenient replacement style, just change the color or style of the picture or less on a picture, the entire page style can be changed. Maintenance more convenient.
2. shortcomings
1, when the merger of the picture, multiple pictures you want an orderly and reasonable combined into one picture, but also to stay well enough space to prevent unnecessary background appears in the sector; these Fortunately, most painful the adaptive pages in widescreen, high-resolution screen, if your picture is not wide enough, it is prone to rupture background;
2, as maintainability, which is generally double-edged sword. Some people may like it, some people do not like it, because every picture had to change this image to delete or add content, it seems a little cumbersome. And the location of the picture count (thousands px especially in this Figure) is a rather uncomfortable thing. Of course, under the slogan of performance, these can be overcome.
3, since the position of the picture needs to be fixed as an absolute value, which lost center such as flexibility and the like.
4, we also mentioned earlier, it is necessary to limit the size of the box in order to use CSS Sprites, otherwise the situation picture interference may occur. This means that in some cases require non-unidirectional tiled background and needs of the page zoom, CSS Sprites is not appropriate. YUI solution is to increase the distance between the pictures so you can keep scaling limits.
3.CSS Sprites picture vitrectomy
1, CSS Sprites picture sequence together pictures from top to bottom, left to right added. Usually the background-position combination digital positioning, so that maintenance can be reduced to bring unnecessary troubles.
2, is not recommended to keep a certain distance CSS Sprites pictures, because the file size increases with increase in file size.
3, CSS Sprites image in the same color combination or close together can reduce the number of colors, because the image file size will be relatively small number of small color.
4, the same size CSS Sprites pictures that leave large gaps in most cases a certain extent, will increase the size, so CSS Sprites pictures do not have a gap.
5, the same picture size CSS Sprites, vertically arranged image file size will be larger than the horizontal arrangement.
6, the CSS Sprites image, the image file size will be horizontally aligned are arranged to be larger than the vertical.
7, image merger of: applying CSS Sprites images, suitably of the same image and the like were combined and reduced in volume to save space.
8, does not need to distinguish the merged image: If the current user is determined when one state or display only one level, the necessary level or status of other pictures combined.
9, Gold cleavage: the far right or left of the CSS Sprites pictures of the most spiritual activity most appropriate location icon placed before the text, so CSS Sprites images will not be other interventions do not need to reserve a certain line width.