Sprite 从PS切图到具体实现完整过程

CSS雪碧图(sprite)是一种网页图片非常高效的处理方式，它是将页面中包含的零星图片利用PS制作到一张大图中，再结合background-position属性进行定位的的方式实现。

它的优点有以下方面：

1.      减少http请求次数。

2.      减少图片字节数（很多人有疑问为什么合在一起还会降低字节数，图片明明变大了。原因是这样的：每个图片都是有固定的格式的，包括图像头、版本号、appo块等等，这些属性都会占一定的字节数。因此合在一起回降低字节数）。

缺点：维护成本增加，比如要修改或增加一个图标需要修改整张sprite图。

解决这一缺点的方法是：增加图标摆放的间隙。根据图片大小一般留20-40px的间隙。

图片合并的基本原则：

1.     色彩相近的合在一起

2.     大小相近的合在一起

3.     属于同一页面的合在一起

4.     有点击或hover状态改变的图标放在一起

具体实现：

一、PS切图：

首先合并图层，然后使用举行选框工具选出需要切出的图标，接着使用魔棒工具+Alt去除多余的部分。最后保存到新建的图层。我这里使用的是Adobe公司的部分软件logo得到的结果如下：

二、CSS布局：

HTML:使用ul_li标签布局

CSS：加上一些CSS属性之后

CSS before选择器：在被选元素的内容前面插入内容。

使用before选择器，为每个li标签加上background-position属性之后：

 

详细解读：以PS为例。

.ps:before{

              background-position:-45px-21px;

           }

其中background-position的第一个值表示PS图标左边距离整张sprite图左边的距离，第二个值表示PS图标上边距离整张sprite图上边的距离。直接上图：

但是我们看见实际运用的时候的值是负数，这就相当于把整张sprite往左边移动45px，往上移动21px。这些值可以用PS直接测量出来。

最后附上demo源码下载地址：https://github.com/usecodelee/sprite