css网站编写..图片与文字层叠

html-css017

css网站编写..图片与文字层叠,第1张

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

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>