Webpages often contain numerous small icons and images that request files from the server. Having to individually request multiple small icons puts excessive pressure on the server and significantly slows down page loading. To effectively reduce the number of requests the server handles and to boost page loading speed, the CSS Sprite technique (also known as CSS Sprites or CSS Snowflakes) emerged.

The精灵图生成器 lets you merge multiple images into one. In your webpage code, use the CSS background property to instruct the browser to read the specified position and size of the image from the sprite sheet and display it on the page.


Drag and drop images here.


px
px (仅逐行扫描模式有效)
Arrangement method:
Image list
。 CSS Code
HTML code