Article introduction of Wulin.com (www.vevb.com): Css Sprite, sometimes called Sprite and Elf Picture, is a problem that every front-end opening encounters, and is also a common method of small picture loading optimization. I believe all students know the principle, so I won’t go into details.
Css Sprite, sometimes called Sprite and Sprite, is a problem that every front-end opens and is also a common method of small picture loading optimization. I believe all students know the principle, so I won’t go into details.
I have always been motivated to use HTML5 to realize a tool for synthesizing Sprite pictures, which facilitates the rapid development of small projects and reduces some mechanical labor such as opening photoshop, fireworks and other tools to combine pictures. Recently, I finally took time to conceive and implement it.
Go!Png Introduction:The current functions are as follows:
Instructions for use: 1. Drag and drop the small picture file to the operation area, as shown below: 2. Input class attribute settings and target image and css file generation, as shown in the figure below 3. The generated css file can be customized by changing the css template.The template function used is John Resig's Micro-Templation.
The variables that can be used are:
The explanations of x, y, w, and h are as follows:
The settings of the css template are as follows:
4. After generating target images and css, you can download them directlyClick the download button to complete the download:
5. Export of working statusThis function can export your current working status, including the picture data (pictures, picture location arrangement), parameter settings (including the homepage parameter settings and css template settings), into one file, and you can restore your working status next time using this file.
Export the following figure:
Import the following figure:
Can be restored: