如何使用HTML中的精灵图

在我们进行网页布局的时候经常会遇到以下的情况

一排或多排文字上/下/左/右会有对应的小图标或图片，比如下图，

下面是我已经做好的一张精灵图

然后在less中写出样式

其中 background-image：是引入你做好的精灵图，找到相应路径，把图片引进来就行

background-size: 是图片尺寸的意思，也就是调节图片大小，一般都会把它的属性设为 cover

background-position:是背景图片定位，就是把图片定到你想要的位置，后面跟单位像素值来调节，第一个代表x轴方向（水平方向），第二个代表y轴方向（垂直方向）

剩下就是调整background-position的数值了，需要分别把每个li元素下面的i标签都重新调整一下，因为每个图的宽度都不一样，要顾及到整个盒子的宽度问题，要能放的下这些图，所以每个i标签的宽度也需要重新调整一下

这样的话可以算是做好了，看下做好的效果是什么样子

怎么样，是不是效果还不错，如果觉得还行的话就点个赞呗！！！

本人学识有限 文章多有不足

若有错误 请大方指出 以免误导他人 谢谢！！！

什么是精灵图？

就是将几张较小的图片放在一张大图上

为什么要有精灵图？

最早的时候网速十分有限，为了提升用户体验，我们会将一张大图分解成多张小图来提高页面打开速度，但是网速得到了提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张较小的图片放在一张大图上，从而减轻服务器的压力。而将多张小图放到一张大图上的 *** 作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprite

精灵图的使用

一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？

1.如果我们需要的一张图片在精灵图上，必须要了解这个图片的大小以及在精灵图上的位置

比如：新浪网上的搜索按钮，首先得到它的宽高和位置

2.在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样

比如：我们要html页面上放一个div，宽高为图片的搜索按钮的宽高

3.将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移

制作精灵图

1.精灵图必须是一些小的图片

2.精灵图的多个小图之间一定要留有足够的间隙

3.精灵图的大小一定要大于所有图片中最大的那个

4.完成精灵图以后一定要在精灵图下方留有足够的空隙，方便将来再次添加其它的精灵图

5.如果是页面上一个像素的背景图片不要放在精灵图上面

---