如果文字和图片重合怎么办?在用background-image设置图片时,如果文字和图

html-css015

如果文字和图片重合怎么办?在用background-image设置图片时,如果文字和图,第1张

可以把文字和图片分别放入不同的div中。

通过添加css的vertical-align:middle,如果图片是背景图片,可以在css中使用“background”设置背景图片,把文字和图片分别放入不同的div中。

文字在图片中间显示有两种方法:

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>