~76 sprite map

One 、 The problem of picture flickering

You can save multiple small pictures into one big picture , And then by adjusting background-position To show pictures , In this way, the picture will be loaded into the web page at the same time , It can effectively solve the problem of flickering pictures

This technology is widely used in web pages , go by the name of CSS-Sprite, This kind of graph is called Sprite

---

Two 、 Use steps

1、 Determine the icon to use

2、 Resize icons

3、 Create an element of the measurement result

4、 Set sprite image as background image of element

5、 Set an offset to display the correct picture

characteristic ： Load multiple images into the page at once , Reduce the number of requests , Speed up access , Enhance user experience

---