精灵图的使用
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>
下图便是用来定位的图片
以下是实现的效果
如代码所示,精灵图的关键便是图片的定位,如何在一张大的图片之中找到自己想要的那张图片,便是实现精灵图的方法。
明天开始继续学习爬虫的知识,之前有学过这方面的,不过只学了一点便放下了。学习的路途永无止境,愿我们不忘初心。