a标签里面包裹img标签,两者要完全登高等宽

废话不多说,直接上代码。

html:

a标签里面包裹img标签,两者要完全登高等宽

<div id="head_game_name" class="head_game_name">
   <a href="javascript:;" class="pic1"><img src="img/nav_pic_icon01.png" alt="" ></a>
   <a href="javascript:;" class="pic2"><img src="img/voice_collect_icon.png" alt="" ></a>
   <a href="javascript:;" class="pic3"><img src="img/voice_share_icon.png" alt="" ></a>
</div>

css代码:

/**返回按钮*/
.pic1{
    position:absolute;
   width:2.2rem;
   top:1.9rem;
   height:2.2rem;
   left:0.65rem;
   z-index:8;
}
.pic1 img{
   position:absolute;
   width:2.2rem;
   z-index:8;
}
/**收藏按钮*/
.pic2{
   position:absolute;
   width:2.2rem;
   height:2.2rem;
   right:3.5rem;
   top:1.9rem;
   z-index:8;
}
.pic2 img{
   position:absolute;
   width:2.2rem;
   z-index:8;
}
/**分享按钮*/
.pic3{
   position:absolute;
   width:2.2rem;
   height:2.2rem;
   right:0.65rem;
   top:1.9rem;
   z-index:8;
}
.pic3 img{
   position:absolute;
   width:2.2rem;
   height:2.2rem;
   z-index:8;
}