Shulou(Shulou.com)06/02 Report--

How to use css sprite tools to generate sprite images, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

What is css sprite?

CSS sprite is called css genie by many people in China, which is a way to deal with web pictures. It allows you to include all the sporadic pictures involved in a page into a large picture, so that when you visit the page, the loaded images will not show up as slowly as before.

Why use this tool?

1. Speed up the loading of web pages

The number of simultaneous requests accepted by the browser is 10. If there are too many images, it will affect the overall visual effect, and for unstable network bandwidth, it is a nightmare to load, so splice the picture into a large image, thus speeding up loading speed and page rendering.

two。 Easy maintenance in the later stage

The tool can directly select the picture to carry on the picture stitching, of course, you can also move the picture inside, layout your sprite image, directly generate the code, easy to use.

3. Open source

The program is open source on github, address: https://github.com/iwangx/sprite

Csdn download address (do not divide)

Http://download.csdn.net/detail/wx247919365/8641795

How to use

1. Use ps or dw to cut out the desired picture.

two。 Open CssSprite.exe

Open the CssSprite.exe file, and I will put the download address on the following point.

3. Open the picture

Click the button in the upper left corner to open the picture

Select multiple pictures and click the Open button

4. Lay out pictures

You can choose the default layout of the top button above today, or you can select the drag position of the picture with the mouse. After dragging, the program will generate the smallest sprite image according to the location of the internal picture. Of course, it will also change the corresponding picture position.

5. Code generation

Sass code and css code can be generated in the program. If you need it, you can choose by yourself. When you select "whether it is the mobile phone side", you will divide all the sizes by 2. Because the design drawing of the mobile phone side is often larger, you need to zoom. It is recommended to copy the generated code after generating the picture.

6. Save Sprite Picture

Click the "generate sprite" button, the program will by default select the address where you open the picture in step 3, and then click OK to generate the sprite.

After reading the above, have you mastered how to use css sprite tools to generate sprite images? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.