引言

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

实现

假设我们通过.toolbtn的类，为应用该类的各元素提供一张背景图片：

CSS Code复制内容到剪贴板 <style>.toolbtn{background:url(myfile.png);display:inline-block;height:20px;width:20px}</style>

背景位置，可以通过在background的url()直接定义X,Y轴的值，或者通过background-position属性来添加。例如：

CSS Code复制内容到剪贴板 <style> #btn1{background-position:-20px0px} #btn2{background-position:-40px0px} </style>

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假设这两个元素的都添加了toolbtn类，应用了上面样式定义的图片效果）

类似的，你也可以使用下面的方式添加hover的状态：

CSS Code复制内容到剪贴板 #btn:hover{background-position:[pixelsshiftedrightright]px[pixelsshifteddown]px;}

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签)。

使用css-sprite雪碧图工具

可能是最好用的雪碧图工具了，好吧，至少是我用过最好用的。

首先安装css-sprite，安装这里很坑，等我最后再说。

npm install css-sprite

我是使用gulp来构建前端代码，所以还需要安装gulp和gulp-if,安装好之后就可以开始配置啦。

新建一个task:

全选复制放进笔记var gulp = require('gulp');

JavaScript Code复制内容到剪贴板 vargulpif=require('gulp-if'); gulp.task('sprites',function(){ gulp.src('img/icon/*.png')//这是要合并的图片的路径 .pipe(sprite({ name:'icon',//定义一个名称 style:'_icon.scss',//这是生成的样式文件 format:'png',//png格式的图片 orientation:'left-right',//雪碧图合并的方向，也可以设置成垂直或水平 cssPath:'#{$icon-sprite-path}',//雪碧图的路径变量 template:'./sprite-tpl.mustache',//scss生成的模板 processor:'scss'//生成的样式文件的格式 })) .pipe(gulpif('*.png',gulp.dest('img/'),gulp.dest('css/'))); });

scss的模板使用mustache：

CSS Code复制内容到剪贴板 {{#items}} ${{name}}:{{px.offset_x}}{{px.offset_y}}{{px.width}}{{px.height}}; {{/items}} @mixinsprite-width($sprite){ width:nth($sprite,3); } @mixinsprite-height($sprite){ height:nth($sprite,4); } @mixinsprite-position($sprite){ $sprite-offset-x:nth($sprite,1); $sprite-offset-y:nth($sprite,2); background-position:$sprite-offset-x$sprite-offset-y; } @mixinsprite($sprite){ @includesprite-position($sprite); @includesprite-width($sprite); @includesprite-height($sprite); } {{#sprite}} {{class}}{ background-repeat:no-repeat; overflow:hidden; border:none; background:url('{{{escaped_image}}}?v=#{$version}'); @includeinline-block(); vertical-align:middle; font-style:normal; color:$icon-font-color; } {{/sprite}} {{#items}} .{{name}}{ @includesprite(${{name}}); } {{/items}}

搞定！就是那么简单。

现在只需要把图片丢到icon文件夹里面，运行下gulp sprites，就可以生成一张雪碧图icon.png和相对应的scss样式文件_icon.scss了，也可以再新建一个监听的任务，监听icon文件夹，这样就可以实时生成了。

我把_icon.scss贴出来：

CSS Code复制内容到剪贴板 $icon-qq:-262px-161px60px60px; $icon-email:-332px-161px60px60px; $icon-skype:-5px-252px60px60px; $icon-phone:-75px-252px60px60px; @mixinsprite-width($sprite){ width:nth($sprite,3); } @mixinsprite-height($sprite){ height:nth($sprite,4); } @mixinsprite-position($sprite){ $sprite-offset-x:nth($sprite,1); $sprite-offset-y:nth($sprite,2); background-position:$sprite-offset-x$sprite-offset-y; } @mixinsprite($sprite){ @includesprite-position($sprite); @includesprite-width($sprite); @includesprite-height($sprite); } .icon{ background-repeat:no-repeat; overflow:hidden; border:none; background:url('#{$icon-sprite-path}/icon.png?v=#{$version}'); @includeinline-block(); vertical-align:middle; font-style:normal; color:$icon-font-color; } .icon-qq{ @includesprite($icon-qq); } .icon-email{ @includesprite($icon-email); } .icon-skype{ @includesprite($icon-skype); } .icon-phone{ @includesprite($icon-phone); }

使用的时候只需要加上类似class="icon icon-qq"，就可以了。