The use of CSS sprite images

If you are using tmt-workflow, then when you run gulp build_dist, the images in the slice directory will be automatically merged according to the use of CSS.

Usage introduction

When a picture icon-twitter.png needs to be merged, please put it into slice directory, and then write this in style-index.css:

.icon-word {    background-image: url('../slice/icon-twitter.png');
}

After merging:

.icon-word {    background-image: url('../sprite/style-index.png');    
background-position: 20px 20px;
}

If the image supports @2x, you can Name them icon-twitter@2x.png and put them into the slice directory together. After merging, the media query will be added:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-resolution: 240dpi) {

    .icon-word{        background-image:url("../sprite/style-index@2x.png");        
    background-position: -4px -4px;        
    background-size:132px;
    }

}

and so on, if it is 3 times Picture, then name it: icon-twitter@3x.png. Currently, only 3x images are supported.

Notes

1. The pictures must be placed in the slice directory to be merged
2. When used The background-image attribute must be recognized to match the
3. @2x image to maintain an even height and width. (If you are lazy, you can let the plug-in automatically add transparent white borders to the odd @2x pictures after the disease is cured)