a标签里面包裹img标签,两者要完全登高等宽
废话不多说,直接上代码。
html:
<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; }