咔拉商城之使用CSS sprite的优缺点

CSS sprite 在国内有人叫它雪碧图，或者叫精灵图，我个人喜欢叫雪碧图。是一种网页图片应用处理方式。说白了CSS sprite就是把所有的图片都放在一张图里面，可以减少HTTP的请求，让网页加载更快。

做咔拉商城页面的时候，最开始我把头部和尾部的一些图标，都是分开的，给每一个图片起名字，觉得起名字太烦了，突然想到有雪碧图这个方式，又能省去我给图片起名，又能减少HTTP请求。我应该最开始就要用雪碧图的，有一段时间没用，所以忘记了。

接下来，在有的页面一些图标多的一些，我就会用雪碧图来制作。

雪碧图使用方法：使用Css的 background-image background-position在定位图片的的位置。

优点：

1.减少HTTP请求，提升网页加载速度。

2.减少给图片起名字。

3.减少了图片的字节，

缺点：

1.合并的图片不适用于较大的图片。

2.使用雪碧图的时候比较麻烦，要通过photoshop或其他的测量工具来计算位置。

3.在维护的时候麻烦，如果页面背景在改动的话，就是改变雪碧图，可能要改动CSS样式。