Practical application of CSS Sprites Technology (figure)

　　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

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;

Figure 1

Figure 2

Figure 3

Experience gained from optimization of buttons in company projects

1. The button image cannot be too large, and the color cannot be too complex. If the color is too rich, the quality of the image will be reduced when the image is merged, and the background will become very rough, when I merge the optimization button into the background image, the quality of the entire background image will be reduced;

2. Buttons of the same style and different colors are placed in the same row or column to facilitate positioning in css. In this way, when css writes background-position, it is OK to change the coordinates;

3. When using the ps tool, the scale must be clear. The value of the scale is below the scale, and I have done repetitive work;

4. A part of space is required for each series of buttons for future extension. Some buttons are added or changed;

5. Because many buttons on the html page used labels such as img, the code in html had to be greatly modified during button optimization, which caused a lot of work; therefore, when writing a page, we should try to use the img label as a button as little as possible. We can use text, such as "Search" and place it between tags, in css, locate the background of the tag (the background is the image of the button) to implement the button effect. Set the text-indent:-999em of the a tag, in this way, the text cannot be seen in the button. If the background does not contain the text, you do not need to set this attribute. You can set the font and color attributes to achieve the text effect of the button;

6. Figure 3 the background is generally used in the News list. In actual application, the Row Height of the List is usually higher than the serial number in the background, therefore, the spacing in the background merging image should be larger than that of the general button, so that the redundant buttons will not be displayed on the page;

Source: http://www.cnblogs.com/huashengjam/archive/2009/08/25/1553404.html