html代码 文字漂浮于图片上面
一、image 作为背景图片，即：background:url(".......");
例如如下代码块：
<div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div>
二、将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：
<div style="position: relative; width: 170px; height: 89px;">
<img src="loading.gif" width="170" height="89" alt="">
<span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>
</div>
扩展资料：
注意事项
position：absolute这个是绝对定位；是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
比如：<div class="1"></div><div class="2"></div>
当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px
博思aippt
2024-07-20 广告
第二种方法：<div style="position:relative"><img src=""><div style="position:absolute;top:xxpx;left:xxpx;">文字</div></div>
方法如下：
方法1：把图片设置为background，然后再打上文字就OK
具体的代码如下：
<div style="background:url(./image.img) no-repeat;">测试文字</div>
方法2：利用div层的效果来处理
具体的代码如下：
<div style="z-index:1;">
<p style="z-index:2;">
测试文字
</p>
</div>
