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

Question

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

我有两个问题..

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

此处给出的图像中的text1，text2，text3，text4。

Q2）如何将它放在页面的中心。我已经给出了

   <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">