打开Python爬虫实战练习页面CSS Sprites （雪碧图）反爬_N05_Spiderbuf，可以看到页面内容跟布局都已经很熟悉了，并且网页内容也并不复杂。
在网页上点击右键 > 显示网页源代码，可以看到网页结构也并不复杂。往下滚动查看源码，第82 - 84行是企业估值(亿元)的源码，但在源码中看不到任何内容，而页面中的内容是正常的。出现这种情况就要想到是由CSS样式控制了内容的显示，所以要根据 class 属性值 sprite 去继续分析。
<p>企业估值(亿元)：<span class="sprite uvwxyz"></span><span class="sprite cdefgh"></span><span
class="sprite abcdef"></span><span class="sprite abcdef"></span><span
class="sprite abcdef"></span></p>
通过关键字 sprite 搜索源码发现 sprite CSS类样式定义在第185 - 191 行，定义中出现了 background-image ，url 后面是一串 data:image/png;base64 开头的超长文本，这个开头我们之前也有讲解过，这是编码成Base64的图片。
从data:image/png;base64开始选中到这串文本结束，然后右键 -> 转到data:image/png;base64，就能在浏览器新的标签面中看到这个图片，看到的图片内容如下：
结合图片以及源码第193 - 241 行的CSS代码，通过CSS相关知识即可分析出企业估值（亿元）的内容是通过控制以上图片的位置来达到显示相关图片内容的目的。
分析出了网页内容的显示逻辑，接下来就开始思考如何获取到对应的内容。
很多人看到图片第一时间就想到OCR识别，其实OCR的准确率不会太高，除非专业针对性地进行机器学习训练，这还需要大量的准备工作，在工作效率上来说不划算。所以先把这个想法放一边，再想想其它的办法。
多刷新几次网页，发现CSS样式代码及图片都是固定不变的，那我们在浏览器上通过开发者工具（F12）把 0 - 9 几个数字的样式类名都抄出来，与数字 0 - 9 形成一个对应关系，在Python中在字典的形式暂存在代码中，这要只需要获取到对应的样式类名就可以取得对应的内容。 获取出来的样式类名及对应的值写成Python代码如下：
class_map = {'sprite abcdef':'0',
'sprite ghijkl':'1',
'sprite mnopqr':'2',
'sprite uvwxyz':'3',
'sprite yzabcd':'4',
'sprite efghij':'5',
'sprite klmnop':'6',
'sprite qrstuv':'7',
'sprite wxyzab':'8',
'sprite cdefgh':'9'}
然后获取内容位置的 <span> 样式类名，再从class_map字典中取值即可。
attr_class = span.attrib["class"] if "class" in span.attrib else ""
amount_str += class_map[attr_class]
完整示例代码：示例代码