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

[haizhilin2013]

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

[wang2250]

css sprites 一般用于局部布局小图标背景 用ps 测量出精确的坐标将图片拼在一起 再利用css的background-position属性进行定位 横坐标定位时 Y轴保持不变 每个元素的坐标等于前面元素的横坐标值加上宽度 纵坐标定位时 X轴不变 每个元素的坐标等于前面元素的纵坐标值加上高度

[vkboo]

首先肯定不会去用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引入小图标即可