html精灵图坐标如何确定,如何使用HTML中的精灵图

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

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

1.png

如果一张图片一张图片的去引入，不仅费时费力，还费资源。

那这个时候该如何去快速的去把它做出来呢

这时候就可以用精灵图去做了，精灵图又叫雪碧图，至于它为什么这么叫呢，说实话我也不知道

你特么这是在逗我.jpg

好了言归正传，该怎么去做呢？

首先我们需要去做一张精灵图，至于怎么做，你可以用ps呀，美图秀秀呀，LOL呀，CF呀等等的平面设计软件去制作

3.jpg

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

spire.jpg

然后就用i标签(其他的标签也行)来引入精灵图

• 微型
• 小型
• 紧凑型
• 中型
• 中大型
• 豪华
• MPV
• SUV
• 跑车
• 新能源

然后在less中写出样式

ul {

font-size: 14px;

line-height: 68px;

cursor: pointer;

li {

.f-l;

&:hover {

color: #4881d4;

}

i {

.whb(50px, 35px, none);

display: inline-block;

background-image: url("../images/spire.jpg");

background-size: cover;

background-position: 0px 0px;

vertical-align: middle;

}

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

background-image: url("../images/spire.jpg");

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

background-size: cover;

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

background-position: 0px 0px;

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

ul {

font-size: 14px;

line-height: 68px;

cursor: pointer;

li {

.f-l;

&:hover {

color: #4881d4;

}

i {

.whb(50px, 35px, none);

display: inline-block;

background-image: url("../images/spire.jpg");

background-size: cover;

background-position: 0px 0px;

vertical-align: middle;

}

&:nth-of-type(2) i {

.whb(80px, 35px, none);

background-position: -106px 0px;

}

&:nth-of-type(3) i {

.whb(90px, 35px, none);

background-position: -236px 0px;

}

&:nth-of-type(4) i {

.whb(100px, 35px, none);

background-position: -392px 0px;

}

&:nth-of-type(5) i {

.whb(109px, 35px, none);

background-position: -538px 0px;

}

&:nth-of-type(6) i {

.whb(105px, 35px, none);

background-position: -710px 0px;

}

&:nth-of-type(7) i {

.whb(87px, 35px, none);

background-position: -860px 0px;

}

&:nth-of-type(8) i {

.whb(87px, 35px, none);

background-position: -993px 0px;

}

&:nth-of-type(9) i {

.whb(107px, 35px, none);

background-position: -1123px 0px;

}

&:nth-of-type(10) i {

.whb(80px, 35px, none);

background-position: -1275px 0px;

}

}

}

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

2.png

如果由背景重复的问题可以加一个属性

background-repeat:no-repeat;//它是设置背景不重复平铺，//

//如果需要重复就把repeat前面的no去掉，repeat是重复的意思//

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

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

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