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