1.图片做为背景,文字采用text-align:center
2.采用相对与绝对定位层实现。
方法1的示例代码:
<style>
.huanhang_li a:link,.huanhang_li a:visited,.huanhang_li a:active{background:url(images/m1.jpg)no-repeatwidth:100pxheight:30px}
.huanhang_li a:hover{background:url(images/m1m.jpg )no-repeat}
</style>
<li class="huanhang_li"><a href="index-2.html">显示的文字</a></li>
方法2的示例代码:
<style>
.huanhang{width:100pxheight:30pxposition:relativebackground:url(images/m1m.jpg )no-repeat}
.huanhang a{position:absolutetop:20pxleft:40pxdisplay:blockwidth:100pxheight:30px}
</style>
<div><a href="index-2.html">显示的文字</a><div>
可以把文字和图片分别放入不同的div中。通过添加css的vertical-align:middle,如果图片是背景图片,可以在css中使用“background”设置背景图片,把文字和图片分别放入不同的div中。
简单点就是background做背景就可以了。
或者用position定位,然后index设置层数,数字越大,显示越靠前
<div style="position:relative"><img src="图片" style="position:absoluteindex:1">
<span style="positon:absoluteindex:2">文字</span>
</div>