【反爬】某网站雪碧图反爬

最新推荐文章于 2021-08-02 17:04:28 发布

转载最新推荐文章于 2021-08-02 17:04:28 发布 · 261 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/lavoz/article/details/103473636?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

爬虫专栏收录该内容

11 篇文章

订阅专栏

博客介绍了获取网页库存值的方法。通过审查元素发现数字由CSS渲染，第一个数字样式由图片偏移量得出。查看svg并本地测试样式，发现background - position位置决定显示数字，水平偏移10会改变数字，后续爬虫可按对应关系获取数字。

在这里插入图片描述

想要获取这里的库存值，查看审查元素，发现这里的数字不是文本，而是css渲染出来的

1.随便点一个数字看看css样式呢
2.这里第一个数字1的样式，发现是由图片偏移量得出的

在这里插入图片描述

3.查看一下这个svg

在这里插入图片描述

4.本地测试一下样式

<head>
    <style>
        font[class^="a"]{
            background: url("https://xxxx/dist/res/home/images/number/aff.svg") 20px -6px no-repeat;
            padding: 1px 4px;
            /* background: url(../../images/number/aff.svg) ; */
            overflow: hidden;
            position: relative;
            top: -2px;
        }

        .asfgderfd {
            background-position: -60px -6px!important;
        }
    </style>
</head>
<body>
    <font class="asfgderfd"></font>
</body>

5.这里background-position的位置决定了网页上显示啥数字，经过测试正好在水平方向上偏移10，就改变了数字的显示

后面爬虫获取样式按照对应关系获取数字即可

在这里插入图片描述