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

html-css022

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 里面然后给图片和文字加上定位，然后文字的图层比图片的图层位置高就行了

第一种

<style>

.div{width: 200pxheight: 200pxbackground: url("图片路径") no-repeat}

</style>

<div class="div">

<p>你的文字内容</p>

</div>

第二种

<style>

.div{width: 200pxheight: 200pxposition: relativez-index: 0}

.div img{position: absolutetop: 0left: 0width: 100pxheight: 100px}

.div p{position: absolutetop: 0left: 0z-index: 10}

</style>

<div class="div">

<img src="图片路径" alt="#">

<p>你的文字内容</p>

</div>

简单点就是background做背景就可以了。

或者用position定位，然后index设置层数，数字越大，显示越靠前

<div style="position:relative">

    <img src="图片" style="position:absoluteindex:1">

    <span style="positon:absoluteindex:2">文字</span>

</div>