The Sprites in CSS

CSS Sprites (sprite chart, sprite chart) * Three names to remember

Definition: The Small navigation button icon that is needed on the interface, the small icon is integrated into a background image

Then use the background-position to achieve the background image positioning

Pros: 1. Reduce the number of requests to the server by consolidating the amount of pictures

2. Integrate images to reduce image volume

principles of picture integration :

1. Edge transduction Edge Integration

2. Avoid Bottom,left properties when positioning (because the image will cause incorrect positioning position when the picture is enlarged), and use the specific values to locate

3. To leave enough space for the small icon (to prevent the space too small, other pictures appear in the area), the small icon is usually placed on the right side of the picture

4. The picture size should be within 100KB of a single integrated photo

5. Integrate images by category

6. In order to facilitate the calculation of dimensions, the coordinates of the sprites graph are calculated as an integral multiple

7. The integrated picture background should be transparent (save in PNG or GIF format)

The Sprites in CSS