一、雪碧图 1.前言
我们都知道，HTTP 协议即超文本传输协议，是 Web 应用的基础，HTTP 协议又是基于 TCP 协议的，而 TCP 连接的建立是需要时间和资源的。当网页加载时，会需要下载图片资源，如果有非常多的小图片，就需要建立很多 TCP 连接。
但勤劳勇敢的前端工作者们，想到把所有小图片放到一张图片里面去，这样就可以通过一次 TCP 连接，下载所有的小图片，再通过前端的奇技淫巧，来展示正确的图片。这种由很多小图片组成的图片，被称为雪碧图，雪碧图在节约 TCP 连接的同时，也为爬取带来了难度。
CSS 雪碧图即 CSS Sprite，也被称为 CSS 精灵，是一种 CSS 图像合成技术，该技术是将小图标和背景图像合成到一张图片中，然后利用 CSS 的背景定位来显示需要显示的图像部分。
CSS 雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，然后使用 CSS 中的 background 和 background-position 属性进行渲染，但当图片数量更多更复杂时，定位就需要更加准确，可能就会用到更多的数值来到达更准的定位。
3.雪碧图的优缺点通过前面的描述，可以很清楚地知道雪碧图有如下优点：
减少加载网页图片时对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量；
减少图片加载所需要的时间，提高页面的加载速度。
除了上述优点，雪碧图还有一些无法避免的缺点：
雪碧图的最大问题是内存使用，因为雪碧图中会有大量的留白空间；
影响浏览器的缩放功能，如果使用雪碧图的页面缩放了，就需要做一些额外的工作来纠正图片边缘；
拼图维护比较麻烦，无论是拼图合成，还是修改图片，都会很麻烦不便于操作；
使 CSS 的编写变得困难，尤其是当图片数量较多时，会大大增加 CSS 的代码量和复杂度。
二、破解实例 1.站点分析
该站点的链接为：。
打开网站，打开开发者工具，选择查看网页上的数字，发现这些数字其实都是 div，通过 CSS 来显示图片：
再查看该元素的 CSS 样式，发现除了宽高之外还有 background-position-x 属性，该属性就是用来控制显示的数字。除此之外，我们可以看到 sprite 类里面定义了一个背景图，打开链接后发现这个背景图如下：
每次加载网页时，都会下载类似上图的包含0-9十个数字的背景图，再通过 CSS 样式中的 background-position-x 属性来显示所需要的数字。
2.破解思路要应对这种使用雪碧图来实现反爬的措施，有如下思路：
1）获取所有 background-position-x 并求对应的数字
因为每个数字对应的 background-position-x 的数值是一样的，所以思路一是获取所有 background-position-x 的数值，再求集合，并根据数值从小到大排列，每个数值就对应一个数字。但这种思路是有问题的，例如上面的截图中并没有数字0，也就没有数字0对应的位置，这就会导致我们获取到的数据是不完整的，也就无法正确表示了。
2）下载图片，根据 background-position-x 的值进行划分
首先是将图片下载下来，并计算出图片的大小，然后根据从 CSS 样式中获取到的 background-position-x 的数值进行划分，就能得到每个数字对应的位置区间。但这种思路也无法解决数字不全所带来的问题，尤其是数字是扭曲的，大小也不一样。
3）下载图片，估算每个数字所占的宽度
将图片下载下来，得到图片的宽度，因为每个数字的宽度其实是差不多的，所以我们可以简单地将图片的宽度除以10来估算每个数字的宽度，再用 background-position-x 的值和这个宽度进行整数除法，就能得到对应的数字了。使用这种方法，即使数字是不全的，也能够计算出来。
三、破解步骤 1.下载图片
前面已经说过在 sprite 类中指明了背景图片，截图如下：