CSS CSS Sprites (CSS Wizard) technology

　CSS Sprites

CSS sprites in the domestic many people called the CSS Wizard, is a Web page image application processing way. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past. For the current popularity of the network speed, no more than 200KB of a single picture of the required loading time is basically the same, so there is no need to worry about this problem.

CSS sprites is actually to integrate some of the background image into a picture file, and then use the CSS "Background-image", "Background-repeat", "Background-position" The combination of the background positioning, background-position can be used to pinpoint the position of the background image.in Web Access, the client sends a request to the server for each image that needs to be accessed, so the more images you have, the more requests you have, and the more likely you are to delay. Therefore, CSS sprites technology to accelerate the key, not to reduce the quality, but to reduce the number, of course, with the increase in memory consumption, CSS sprites pictures cumbersome synthesis and other shortcomings in the performance of the site before the upgrade, is not enough for the road. 　　 use of CSS sprites:. Bg_sprite{background-image:url (/full map address); Background-repeat:no-repeat}#ico1 {width: container width; height: container height; background-position:x coordinate y-coordinate}#ico2 {width: container width; height: container altitude; background-position:x coordinate y-coordinate} #ico3 {width: container width; height: container heights; BACKGROUND-POSITION:X coordinates Y coordinate}. nav {width: container width; height: container height; background-position:x coordinate y-coordinate} Of course there are shorthand methods: #ico1 {width: container width; height: container height; background:u　　RL (/Full image address) no-repeat x coordinate y-coordinate;} where the x and y coordinates represent the offset of the original image relative to the upper-left corner of the Ico1 box, that is, the coordinates 0 0 indicate that the upper-left corner of the background and Ico1 box coincide. 　　 Example:Image "Bg_sprite.png" code

1 ico {width:16px;height:16px;background:url ("bg_sprite.png") No-repeat 0-234px;}

The effect is:

　　

CSS CSS Sprites (CSS Wizard) technology