css sprite, css sprite generation tool V3.0 update_html/css_WEB-ITnose

What is css sprite

CSS sprite is called css sprite by many people in China. It is a web image application processing method. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. .

Why use this tool

1. Speed ​​up web page loading

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

2. Post-maintenance is simple

This tool can be directly selected by Pictures are used for splicing pictures. Of course, you can also move the pictures inside, lay out your sprite pictures yourself, and directly generate the code. It is simple and easy to use

3. Open source

This program is already available in Open source on github, address: https://github.com/iwangx/sprite

csdn download address (don’t divide it)

http://download.csdn.net/detail/wx247919365/8660503

How to use

1. Use ps or dw to cut out the required pictures

2. Open CssSprite.exe

Open the CssSprite.exe file

3. Open the picture

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

In the current version, only one type can be opened at a time Image files

4. .sprite files

This update adds the function of generating .sprite files at the same time when generating images. You can click the button "Open .sprite" in the program button, select the .sprite file, and restore the original view of the sprite image

Please make sure that the .sprite and the image files in it are in the same folder

5. Arrange the images

You can choose the default layout of the top button today, horizontally or vertically, or you can select the drag position of the image with the mouse. After the drag is completed, the program will generate a sprite image with the smallest area based on the position of the internal image. Of course, it will also Change the corresponding picture position

You can click the - picture button to add and delete pictures. Currently, you can only operate a single picture.

6. Code generation

You can generate sass code and css code in the program. You can choose according to your needs. When you select "Whether it is a mobile phone", all sizes will be generated. Divide by 2, because the design drawings on mobile phones are often larger, so they need to be scaled. It is recommended to copy the generated code after generating the image

7. Save the sprite image

Click the "Generate Sprite Image" button, and the program will select the address where you opened the image in step 3 by default, then click OK to generate the Sprite Image.

A .sprite file will be generated at the same time