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

Question

I am designing this for a phone gap application..i want to code this in html..

i have two questions..

Q1)how do i place a text on the image at different positions?

suc as text1,text2,text3,text4 in the image given here.

Q2) how to place it at the centre in the page.i had given

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

but,this makes no difference.

guidance required.please help.

i have another doubt...after running the program....there is the extension part of the body after the footer...if you drag up....you can see thtat the body that is between the header and footer is extended. and it moves evento the right. any mistake in the coding?

Answer 1

put them in a Div, then give this Div a background style ;) the code should be like this:

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

in the 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;}

you can add border to the spans, color etc...

Answer 2

You can do that by wrapping image with div and z-index. Your code should look like this:

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