HTML编码 - 如何在HTML中的图像上放置文本？

Question

我正在为手机间隙应用程序设计这个..我想用html进行编码..

我有两个问题..

Q1）如何在不同位置的图像上放置文字？

在此处给出的图像中以text1，text2，text3，text4为准。

Q2）如何将它放在page.i的中心

   <img src="img/img1.png" style="margin-left:5px;" />
   <img align="middle" />

但是，这没什么区别。

需要指导。请帮助。

我有另一个疑问......在运行程序之后......在页脚之后还有身体的延伸部分...如果你向上拉......你可以看到身体那个在页眉和页脚之间是扩展的。它会向右移动。 编码中的任何错误？

Answer 1

将它们放入Div中，然后给这个Div一个背景样式;） 代码应该是这样的：

<div id='container'> 
 <span> text 1 </span> 
 <span> text 2 </span> 
 <span> text 3 </span>      
 <span> text 4 </span> 
</div>

在css中：

#container{background:url(path/to/img) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; height:...px; width:...px;}
#container span{width:50%; height:25%;display:block; overflow:hidden;float:left;}

你可以为跨度，颜色等添加边框......

Answer 2

你可以通过用div和z-index包装图像来做到这一点。您的代码应如下所示：

<div style="position:fixed; top:10px; left:5px; z-index:250; width:ofimage; height:of image;">
<span style="display:block; width:30; height:20; margins if you need; float:left">text1</span>
 <span style it accordingly and add float left>text2</span><br>
<spanstyle them as first two>text3</span>
<span>text4</span>

</div>

<img src="your image" style="if any">