白驳风专家在线 http://m.39.net/pf/a_4473349.html前言
我们都知道，HTTP协议即超文本传输协议，是Web应用的基础，HTTP协议又是基于TCP协议的，而TCP连接的建立是需要时间和资源的。当网页加载时，会需要下载图片资源，如果有非常多的小图片，就需要建立很多TCP连接。
但勤劳勇敢的前端工作者们，想到把所有小图片放到一张图片里面去，这样就可以通过一次TCP连接，下载所有的小图片，再通过前端的奇技淫巧，来展示正确的图片。这种由很多小图片组成的图片，被称为雪碧图，雪碧图在节约TCP连接的同时，也为爬取带来了难度。
定义CSS雪碧图集CSSSprite，也被称为CSS精灵，是一种CSS图像合成技术，该技术是将小图标和背景图像合成到一张图片中，然后利用CSS的背景定位来显示需要显示的图像部分。
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，然后使用CSS中的background和background-position属性进行渲染，但当图片数量更多更复杂时，定位就需要更加准确，可能就会用到更多的数值来到达更准的定位。
雪碧图的优缺点通过前面的描述，可以很清楚地知道雪碧图有如下优点：
减少加载网页图片时对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量；
减少图片加载所需要的时间，提高页面的加载速度。
除了上述优点，雪碧图还有一些无法避免的缺点：
雪碧图的最大问题是内存使用，因为雪碧图中会有大量的留白空间；
影响浏览器的缩放功能，如果使用雪碧图的页面缩放了，就需要做一些额外的工作来纠正图片边缘；
拼图维护比较麻烦，无论是拼图合成，还是修改图片，都会很麻烦不便于操作；
使CSS的编写变得困难，尤其是当图片数量较多时，会大大增加CSS的代码量和复杂度。
破解实例、站点分析该站点的链接为：