html代码 文字漂浮于图片上面

一、image 作为背景图片，即：background:url(".......")

例如如下代码块：

<div style="background:url('loading.gif') no-repeatwidth:100pxheight:50px">添加文字...添加文字...添加文字...</div>

二、将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

<div style="position: relativewidth: 170pxheight: 89px">

<img src="loading.gif" width="170" height="89" alt="">

<span style="position: absolutetop: 0left: 0">添加文字...添加文字...添加文字...</span>

</div>

扩展资料：

注意事项

position：absolute这个是绝对定位；是相对于浏览器的定位。

比如：position：absolute；left:20pxtop:80px这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:leftwidth:100pxheight:800px

2的样式为float:leftposition：relative；margin-left:20pxwidth:50px

2的位置在1的右边，距离120px

在html中字浮于图上的话：

1.通过使用一个div或者是p然后写上你所需要的字，然后在将那个图片设置成背景就行了；

<div style='background:url('图片地址')'>

<p>我是测试文字</p>

</div>

2.你可以使用一个z-index的属性，设置层，将文字层置于图片图片之上，在来一个position定位就行了

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<script>标签，输入js代码：

<div style="background: url(small2.png)height: 60px">

<span style="position: absoluteright: 10px">123</span>

</div>

3、浏览器运行index.html页面，此时文字成功浮动到了图片右上方了。

---