2013-04-23 49 views
0

我设计这一个电话差距application..i想在HTML编写这个..html编码 - 如何在HTML中的图像上放置文本?

我有两个问题..

Q1)我如何放置文本在图片上不同位置?

作为text1,text2,text3,text4在这里给出的图像。

Q2)如何将其放置在page.i中心给了

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

,但是,这并没有区别。

指导required.please帮助。

enter image description here

我还有一个疑问......运行该程序后....有页脚后身体的延伸部分...如果你拖上去....你可以看到thtat在页眉和页脚之间的身体延长。它会移动事件的权利。 编码中的任何错误?

+0

可以使用HTML5画布 – Jacob 2013-04-23 08:08:47

回答

1

把它们放在一个div,然后给这个div背景风格;) 代码应该是这样的:

#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;} 

您可以添加边框:

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

跨度,颜色等...

+1

T.Baba做到这一点,它的工作好,谢谢...... – user 2013-04-29 07:00:48

+0

你知道,如何使用Java脚本来实现刷卡VIEW(动态)。根据列的长度,我们可以找到特定列的长度。请回复.......它......非常混乱......对我来说。 – user 2013-04-29 07:04:23

+0

对于刷卡,请查看此链接:http://www.awwwards.com/demo/touchSwipe-gallery-demo.html – 2013-04-29 08:40:04

1

你可以通过用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">