Table
Install
npm install css-img-sprite
Gulp Version
- Gulp : gulp-css-img-sprite
How To Write CSS
shop: bag:
- add '?__sprite' or '?__spriter' at the end of url to do sprite:
after sprite: new image: new css file:
-
you can scale the image by set background-size.we can put the same scale images into one output image.
-
you can not use repeat,repeat-x or repeat-y with scale!=1,for example: you scale the image 2 times and you also use repeat-x,as a result, although you add '?__spriter',you will not get sprite image.
you can write css like this:
/*or*/
- you can use auto to set background-size
/* or *//* or */
important:we will do nothing about unsprite image.so you need to copy unsprite image into new folder.and you need to take care the folder structure because we will not change the unsprite image url in 'background-image'
How To Write JS
-
API:
- raw ( content , spriteObj )
- sprite ( spriteObj , callback )
- spriteSync ( spriteObj )
-
Arguments Guide
/** * arguments: * content: * spriteObj: * spriteObj.cssSrc: * [spriteObj.cssDesDir]: * you need do it yourself.we need it because we need to change * css background-image:url() * [spriteObj.imgDesDir]: * [spriteObj.layout]: * [spriteObj.hash]: * [spriteObj.errLog]: * callback: * return: * content: * **/
raw is a low level api.you need to read css content and write new css file.
Example
you can see the usage in test folder