先将图片拼接在一张图上。类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置。 效果如: HTML: div class="logo" div class="icon icon1" /div div class="icon" /
先将图片拼接在一张图上。类似实现的效果图
图片地址为合并后的图片地址,通过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; }