CSS Sprite Chart

The basic principle of CSS Sprite is to integrate some of the images you use on your site into a single image, reducing the number of HTTP requests on your site. This image is rendered using CSS background and background-position properties, which means your tags are more complex, and the images are defined in CSS rather than tags.

A simple example: a picture to make a button of three states a link with CSS as a button style, we can use the same picture, complete the button three states, A:link,a:hover,a:active. <a class= "button" href= "#" > Links </a> Add to the right of the picture is: 200pxx65px of the three button diagram of the image of a mosaic, from the top to the Next button of the normal, mouse over, The state of the mouse click. You can use CSS to define it. a {display:block; width:200px; height:65px; line-height:65px;/* define State */text-indent:-2015px;/* Hide Text */background-image: URL (button.png); /* Define background picture */background-position:0 0; /* Defines the normal state of the link, at which point the image shows the top part */}a:hover {background-position:0 -66px;/* Defines the slip-over state of the link, at which point the middle part is displayed, and the negative value is taken down */}a:active { Background-position:0 -132px; /* Defines the normal state of the link, at which point the bottom portion is displayed, negative values are taken downwards */} Beginner Friends can try the effect. More CSS Sprite, more complex images, more accurate background positioning. A large number of values may be used, such as: Background:url (nav.png) -180px 24pxno-repeat; To achieve more precise positioning.

CSS Sprite Chart