CSS Sprites Technology

Core tip: as the web design toward the delicate, ingenious direction, designers began to consider using non-JavaScript way to make mouse over, hover menu effect, when the CSS sprite came into being.

Introduction to CSS Sprites

It is often translated as "CSS image flattening" or "CSS mapping positioning". CSS sprites is not a new technology, at present it has developed in the development of a more mature Web page, Alibaba each subsidiary of the Web page everywhere can find the shadow of CSS sprites. But CSS sprites is not a golden rule, but in many cases, it has a certain advantage, the most important thing is that it can reduce the load on the server, improve the speed of loading Web pages. As the web design toward the delicate, ingenious direction, designers began to consider the use of non-JavaScript way to make the mouse over the hover menu effect, when the CSS sprite came into being.
To put it bluntly, CSS sprites is actually a page of some background pictures into a picture file, and then use the CSS "Background-image", "Background-repeat", "Background-position" The combination of background positioning, background-position can be used to pinpoint the location of the background image.
When the page loads, instead of loading each individual picture, it loads the entire composite picture at a time. This is a remarkable improvement, it greatly reduces the number of HTTP requests, reduce server pressure, while shortening the hover load of pictures required time delay, so that the effect is smoother and will not pause.

CSS Sprites Applications

In this respect, Taobao do better, I take Taobao as an example.

　　Example one: Taobao Channel page navigation

Effect Chart:

Sprites Chart:

　　Example two: Taobao home

Effect Chart:

1 2 Next page > full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] Next page