[css] 你是怎么设计css sprites（精灵图）的？有哪些技巧？

首先肯定不会去用PS量，那太费时间了~
没有webpack以前，用Gulp的gulp.spritesmith插件，这里附上配置源码/* gulpfile.js */
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const $ = gulpLoadPlugins();/*** @desc 雪碧图自动合成*/
gulp.task('sprite', function () {return gulp.src('src/assets/sprite/*.png')//需要合并的图片地址.pipe(spritesmith({imgName: 'assets/sprite.png',// cssName: 'css/_sprite.scss',cssName: 'scss/_sprite.scss',padding: 5,algorithm: 'binary-tree',cssTemplate: function (data) {var arr = [];data.sprites.forEach(function (sprite) {arr.push(".icon-" + sprite.name + "{" +"background-image: url('" + sprite.escaped_image + "');" +"background-position: " + sprite.px.offset_x + " " + sprite.px.offset_y + ";" +"width:" + sprite.px.width + ";" +"height:" + sprite.px.height + ";" +"display: inline-block;" +"vertical-align: middle;" +"}\n");});return arr.join("");}})).pipe(gulp.dest('dist/')).pipe(gulp.dest('src/'));
});把图放入对应的文件夹中，然后根据文件名对应的类名引用就行了
webpack的话可以使用webpack-spritesmith，安装了webpack-spritesmith之后var SpritesmithPlugin = require('webpack-spritesmith');
//module.exports = {//代码}
plugins: [new SpritesmithPlugin({// 目标小图标src: {cwd: path.resolve(__dirname, './src/assets/imgs/icons'),glob: '*.png'},// 输出雪碧图文件及样式文件target: {image: path.resolve(__dirname, './dist/sprites/sprite.png'),css: path.resolve(__dirname, './dist/sprites/sprite.css')},// 样式文件中调用雪碧图地址写法apiOptions: {cssImageRef: '../sprites/sprite.png'},spritesmithOptions: {algorithm: 'top-down'}})
]在index.html中引入css<link rel="stylesheet" type="text/css" href="./dist/sprites/sprite.css" />最后通过class引入小图标即可