一、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、首先，打开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页面，此时文字成功浮动到了图片右上方了。
在html中字浮于图上的话：1.通过使用一个div或者是p然后写上你所需要的字，然后在将那个图片设置成背景就行了；
<div style='background:url('图片地址')'>
<p>我是测试文字</p>
</div>
2.你可以使用一个z-index的属性，设置层，将文字层置于图片图片之上，在来一个position定位就行了
