CSS uses the Background-position property to complete the code of the sprite diagram

What is sprite diagram?

Sprite is a CSS sprite, some call it CSS Wizard, is a CSS image merging technology, is to combine a number of small icons into a picture, and then use the CSS background-position to display the need to display the part.

Why use Sprite chart?

It can reduce the number of requests to the server when loading webpage picture, improve the loading speed of the page, and solve the phenomenon of flashing white when the IE6 mouse is out of date.

What's the downside of using sprite charts?

Personally think if your sprite is not very large, it is not very complex basic no drawbacks. If your sprite is large and complex, there will be CSS code review, Web pages account for a wide range of problems such as memory.

Instance

It's a button, and the second is what it looks like when the mouse passes.

Here are two small icons that have been synthesized by a sprite chart

Personal Center