[爬虫] 某网站雪碧图反爬

最新推荐文章于 2023-08-15 14:57:08 发布

原创最新推荐文章于 2023-08-15 14:57:08 发布 · 647 阅读

1 ·

CC 4.0 BY-SA版权

爬虫专栏收录该内容

1 篇文章

订阅专栏

本文解析了网站通过CSS样式而非文本展示数字的技巧，详细介绍了如何通过背景图片的偏移量来呈现不同数字，并展示了如何利用本地测试验证这一原理，为爬虫获取网页数字提供了新思路。

在这里插入图片描述

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

随便点一个数字看看css样式呢
这里第一个数字1的样式, 发现是由图片偏移量得出的
查看一下这个svg
本地测试一下样式

<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>