css雪碧图-css精灵图

标签：osi   htm   idt   效果   col   line   span   alt   font   

先将图片拼接在一张图上。类似实现的效果图

图片地址为合并后的图片地址，通过background-position调整背景图的位置。
效果如：


HTML：

<div class="logo">
<div class="icon icon1">

</div>
<div class="icon">

</div>
<div class="icon">

</div>
<div class="icon">

</div>
</div>

CSS:

.logo{
position: absolute;
top:40%;
left:30%;
}
.icon{
background: url(img/xbt.png);
width: 50px;
height:50px;
display: inline-block;

}
.icon:nth-child(1){
background-position: 255px 151px;
}
.icon:nth-child(2){
background-position: 255px -69px;

}
.icon:nth-child(3){
background-position: 735px 151px;
}
.icon:nth-child(4){
background-position: 255px -237px;
}

css雪碧图-css精灵图

标签：osi   htm   idt   效果   col   line   span   alt   font   

原文地址：https://www.cnblogs.com/snowbxb/p/11307298.html