如何使用HTML中的精灵图

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

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

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

然后在less中写出样式

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

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

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

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

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

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

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

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

html精灵图能用backgroundsize调整大小。需要使用精灵图的核心代码，为sprites里的span元素设置背景图像，引用精灵图为背景图像调整尺寸大小，使得sprites盒子的span元素的背景图像固定为宽（60px），高（40px），设置或检索sprites盒子的span元素的背景图像位置。必须先指定background-image属性才可使用。

---