在知乎上看到一个问题，大概意思就是为什么不能使用xpath获取租金价格信息。题目链接在这里：题目地址看到题目，觉得很好解决，心想快点把答案写完。原来是我太年轻太单纯了。抓取的URL来自自如租房。开始回答这个问题，如下：看到你的问题，本来想介绍xpath的，结果发现自己太年轻太简单了。看来自如为了防爬居然用了一张精灵图来显示价格，而且最重要的是这张精灵图中数字的显示顺序是随机的，每次出现都会换图刷新。什么是精灵贴图什么是精灵贴图？简单来说，就是将所有的图片组合成一张大图，然后将图片的某一部分进行移位显示。更不用说Sprite贴图的好处了。而随意使用sprite贴图的目的只是为了防爬。让我们仔细看看spritechart的工作原理。我们来看一下自如用来显示价格的精灵图，如下：所有的数字组合在一张图表上。价格展示那么如何做才能展示价格，前端代码怎么写呢？HTML部分，如下：￥（每月）
主要是通过css设置background-position来设置imageshift显示不同的数字。雪碧呢？这里没有设置图片的代码。再看CSS部分，如下：body.ratio2.pricespan.num{background-size:auto30px;background-image:url(//static8.ziroom.com/phoenix/pc/images/price/e05092a2f84c9cca5e4d881535072ae1.png);}background-image设置显示的背景图片。我们可以截取里面的url，然后加上http的前缀，如下：http://static8.ziroom.com/pho...访问这个地址，会得到一个和开头类似的图片，如下:注：不知道这些图片会不会经常清理。如果查看答案时打不开图片，可以去自如官网再次查看。那么这张图，价格是怎么显示的呢？这是嵌入在html中的css发挥作用的地方。看显示价格的html代码：
￥（每月）大家可以先看看，上面代码显示出来的页面是什么样子的？如下：显示的价格是2090，然后继续看sprite图片中数字的顺序，html代码中的background-position，css图片的显示大小（30px），就可以launch了它。显示数字与background-position的关系为：0px1-30px7-60px4-90px3-120px5-150px9-180px8-210px0-240px2-270px6代码实现如果spritemap是固定的，我们可以写类似下面的代码：position_text_map={"background-position:0px":1,"background-position:-30px":7,"background-position:-60px":4,"background-position:-90px":3,"background-position:-120px":5,"backg圆形位置：-150px”：9，“背景位置：-180px”：8，“背景位置：-210px”：0，“背景位置：-240px”：2，“背景位置：-270px":6}price=0forspan_selectorinprice_selector.xpath("/span[@class='num']"):position=span_selector.xpath('//div/@style')[0]price=price*10+position_text_map[position]print(price)这里可以计算最终价格随机排序但是，我想很抱歉不是那么简单，spritemap每次都是随机生成的，所以只有网站知道每个什么位置对应的数字是多少，但是我们无从知晓。那么，有没有办法解决呢？当然不是。这时候就需要OCR技术，也就是图片到文字的转换。幸运的是，价格需要人眼很容易识别，所以不像验证码那么奇怪，我们可以从github上找到一些解决方案，比如使用tesseract提供了图片文字识别的解决方案，github如下：tesseract-ocr/tesseract我们也可以找到它对应的Python包：sirfz/tesserocr只要我们成功识别出sprite图片中数字的顺序，后面的事情就好办了。综上所述，其实就是将价格上的每一个数字转换成图片展示。而其中一项用到的重要技术就是sprite图像。这样就可以将具体的文字转换成对应的css，类似于某种加密效果。最后实现反爬虫。
