Day_11

精灵图的使用

　　Spirit，精灵图，也叫雪碧图的用法：解决服务器的过多的请求的问题。

　　现在的网络越来越快，网速已经不是人们所需要考虑的第一因素了，而随之带来的大量的请求却是给服务器带来大量的负荷，Spirit的出现就是为了解决当页面之中出现大量背景图的请求时的方案。当网页之中有大量的图片，每取一次零碎的图片资源便向服务器请求一次，这无疑不断的加重服务器的负荷，所以如何将大量的图片一次性加载到网页之中，便是我们解决问题的方案之一。所以Spirit的关键就是将大量且零碎的图片整合到一张图片之中，具体的实现方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            display: inline-block;
            background: url("img/img.jpg") no-repeat;
            vertical-align: middle;
        }
        .w {
            background-position: -115px bottom;
            width: 138px;
            height: 115px;
        }
        .h {
            background-position: -216px -140px;
            width: 108px;
            height: 109px;
        }
        .o {
            background-position: -369px -275px;
            width: 114px;
            height: 113px;
        }
        .n {
            background-position: -251px -273px;
            width: 117px;
            height: 117px;
        }
        .e {
            background-position: -480px -5px;
            width: 101px;
            height: 112px;
        }

    </style>
</head>
<body>
    <div>
        <span class="w"></span>
        <span class="h"></span>
        <span class="o"></span>
        <span class="n"></span>
        <span class="e"></span>
        <span class="n"></span>
        <span class="o"></span>
        <span class="w"></span>
    </div>
</body>
</html>

　　下图便是用来定位的图片

　　以下是实现的效果

　　如代码所示，精灵图的关键便是图片的定位，如何在一张大的图片之中找到自己想要的那张图片，便是实现精灵图的方法。

　　明天开始继续学习爬虫的知识，之前有学过这方面的，不过只学了一点便放下了。学习的路途永无止境，愿我们不忘初心。

猜你喜欢