CSS Sprite, a simple example of CSS sprites

CSS Sprite Generation Tool

Http://pan.baidu.com/s/1gdGQwiJ

Tool to integrate multiple images and create CSS.

HTML code

<style>. IMG{background:URL (img.png) no-repeat;}            . Lighthouse{Height:768px;width:1024px;background-position:0 0;}            . Koala{Height:768px;width:1024px;background-position:0-768px;}            . Tulips{Height:768px;width:1024px;background-position:0-1536px;}            . Penguins{Height:768px;width:1024px;background-position:0-2304px;}            . Desert{Height:768px;width:1024px;background-position:0-3072px;}            . Chrysanthemum{Height:768px;width:1024px;background-position:0-3840px;}            . Jellyfish{Height:768px;width:1024px;background-position:0-4608px;}            . Hydrangeas{Height:768px;width:1024px;background-position:0-5376px;}</style><imgclass= "img hydrangeas" />

Advantages

? Reduce the number of requests to the server when loading Web images
? Increase the load speed of the page
? Some bugs that decrease the mouse slide

Insufficient

? The biggest problem with CSS sprite is memory usage
? Affects the zoom function of the browser
? Puzzle Maintenance More Trouble
? Making CSS difficult to write
? CSS Sprite call picture cannot be printed
? Error using Sprites to affect accessibility

CSS Sprite, a simple example of CSS sprites