如何使用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是重复的意思//

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

本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人 谢谢！！！