如何做精灵图

雪碧图又叫精灵图，名字很可爱很动听。但是呢，如何操作你学会了么？
做网页的时候会有很多图片，一张一张保存特别麻烦，那就可以让雪碧图来帮你，把页面所需图片整合在一张图片上，设置为元素的背景用background-image引入然后用背景定位background-position去调整元素的位置达到想要的效果。

spire.png

1560139078(1).png

第一步：在html里做出一个盒子（dt用来装精灵图，dd是字，p标签用来做三角形）

<div class="jinglingtu">
    <div class="jinglingtu-top">
        <dl>
            <dt></dt>
            <dd>问答</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>wiki</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>课程</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>社群</dd>
            <p></p>
        </dl>
    </div>
    <div class="jinglingtu-bottom">
        <dl>
            <dt></dt>
            <dd>下载</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>知识</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>职业</dd>
            <p></p>
        </dl>
        <dl>
            <dt></dt>
            <dd>VIP</dd>
            <p></p>
        </dl>
    </div>
</div>

第二步：在css里做出基本样式

*{
margin: 0px;
padding: 0px;
}
.jinglingtu{
width: 232px;
height: 170px;
background: pink;
margin: 0 auto;
margin-top: 20px;
}
.jinglingtu-top{
width: 232px;
height: 85px;
background: white;
}
.jinglingtu-top dl{
width: 56px;
height: 85px;
background: white;
float: left; 
}
.jinglingtu-top dl dt{
width: 30px;
height: 30px;
background: white;
margin: 0 auto;
margin-top: 16px;
}
.jinglingtu-top dl dd{
text-align: center;
font-size: 15px;
margin-top: 7px;
}
.jinglingtu-bottom{
width: 232px;
height: 85px;
background: white;
 }
.jinglingtu-bottom dl{
width: 56px;
height: 85px;
background: white;
float: left; 
}
.jinglingtu-bottom dl dt{
width: 30px;
height: 30px;
background: white;
margin: 0 auto;
margin-top: 16px;
}
.jinglingtu-bottom dl dd{
text-align: center;
font-size: 15px;
margin-top: 7px;
}
.jinglingtu-top p{
list-style: none;
float: left;
width: 0;
height: 0;
border: solid 6px transparent;
border-top-color: #E4E4E4;
margin: 6px 0px 0px 22px;
}
.jinglingtu dl{
border: 1px solid #E4E4E4;
}

1560147062(1).png

；

第三步：引入精灵图，操作还是写在css里

.jinglingtu-top dl:nth-child(1) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 1px;
}
.jinglingtu-top dl:nth-child(2) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -26px;
}
.jinglingtu-top dl:nth-child(3) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -52px;
}
.jinglingtu-top dl:nth-child(4) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -79px;
}
.jinglingtu-bottom dl:nth-child(1) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -106px;
}
.jinglingtu-bottom dl:nth-child(2) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 84px;
}
.jinglingtu-bottom dl:nth-child(3) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 57px;
}
.jinglingtu-bottom dl:nth-child(4) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 31px;
}

那么这个图就做完了：

1560147586(1).png

。

小露身手，如有失误，恭候点评，感谢阅读！