在我们进行网页布局的时候经常会遇到以下的情况
一排或多排文字上/下/左/右会有对应的小图标或图片，比如下图，
1.png
如果一张图片一张图片的去引入，不仅费时费力，还费资源。
那这个时候该如何去快速的去把它做出来呢
这时候就可以用精灵图去做了，精灵图又叫雪碧图，至于它为什么这么叫呢，说实话我也不知道
你特么这是在逗我.jpg
好了言归正传，该怎么去做呢？
首先我们需要去做一张精灵图，至于怎么做，你可以用ps呀，美图秀秀呀，LOL呀，CF呀等等的平面设计软件去制作
3.jpg
下面是我已经做好的一张精灵图
spire.jpg
然后就用i标签（其他的标签也行）来引入精灵图
<div class="content-1">
<ul>
<li><i></i>微型</li>
<li><i></i>小型</li>
<li><i></i>紧凑型</li>
<li><i></i>中型</li>
<li><i></i>中大型</li>
<li><i></i>豪华</li>
<li><i></i>MPV</li>
<li><i></i>SUV</li>
<li><i></i>跑车</li>
<li><i></i>新能源</li>
</ul>
</div>
然后在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是重复的意思//
怎么样，是不是效果还不错，如果觉得还行的话就点个赞呗！！！
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人 谢谢！！！
网友评论