Introduction to CSS Sprites
It is usually translated as "CSS image stitching" or "CSS texture positioning". CSS Sprites is not a new technology. It has developed relatively maturely in web development. The shadow of CSS Sprites can be found everywhere in the web pages of Alibaba's subsidiaries. But CSS Sprites is not a golden rule, but in many cases, it has certain advantages. The most important thing is that it can reduce the load on the server and improve the loading speed of web pages. As web design develops in a more sophisticated and ingenious direction, designers begin to consider using non-Javascript methods to create mouse-over and hover menu effects. At this time, CSS Sprite came into being.
To put it bluntly, CSS Sprites actually integrates some background images in the web page into an image file, and then uses the combination of CSS "background-image", "background-repeat" and "background-position" to position the background. Position can use numbers to accurately locate the position of the background image.
When the page loads, instead of loading each individual image, the entire combined image is loaded at once. This is a great improvement. It greatly reduces the number of HTTP requests, reduces server pressure, and shortens the time delay required to load images on hover, making the effect smoother and without pauses.
Articles related to CSS Sprites
CSS Sprites application
In this regard, Taobao does better. Let me take Taobao as an example.
Example 1: Taobao channel page navigation
Rendering:
sprites diagram:
