CSS Sprite Chart

Introduction Edit

Sprite charts are used on many websites that use a lot of small icons. Instead of referencing each small icon to a page in the form of a. png file, using Sprite maps only requires referencing one picture, which is more memory-and bandwidth-friendly.

Implement Edit

Suppose we pass a. Toolbtn class that provides a background image for each element of the class that is applied:

<style> .toolbtn {background:url (myfile.png) display:inline-blockheight:20px width:20px } </style< Span class= "token punctuation" >>

background position, you can define the value of the x, Y axis directly by the URL () in background. Or you can add it by using the Background-position property. For example:

<style> #btn1 {background-position:-20px 0px} < Span class= "token ID" > #btn2 {background-position< Span class= "token punctuation" >:-40px 0px} </style>

ID=BTN1 element background left shift 20PX,ID=BTN2 element background left 40px (assuming that all two elements are added TOOLBTN class, apply the above style definition of the picture effect)

Similarly, you can add the hover state using the following method:

#btn:hover {background-position: [pixels shifted right]px [pixels shifted down]px;}

Deep reading

The Complete demo:http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

CSS Sprite Chart