图中的1,2,3排名小图标都是从大图中通过position抠取的,在依次添加小图标的过程会遇到logo大图的位置移动,为了使得排列整齐,小图标采用绝对位置即可。
给出html代码:此处的class中的no是父类,在css中可以合并共有的代码。
<div class="image2">
<div class="no1 no"></div>
<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>
<div class="image2">
<div class="no2 no"></div>
<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>
<div class="image2">
<div class="no3 no"></div>
<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>
给出css代码:
.no{
position: absolute;
background:url(http://static.hostucan.wn/image/bestidc/icon.png);
height:32px;
width:30px;
margin-left: 10px;
}
.no1{
background-position:-25px -110px;
}
.no2{
background-position:-25px -157px;
}
.no3{
background-position:-25px -207px;
}
效果图:
更新版本:
自制排名图标形状:
css代码:
.rk.rk1 {
background: #C10037;
border: 5px solid #C10037;
border-bottom: 5px solid #FFF;
width: 0;
border-left-width: 10px;
border-right-width: 10px;
}