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

问题描述：

我设计这一个电话差距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在页眉和页脚之间的身体延长。它会移动事件的权利。编码中的任何错误？

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

答

把它们放在一个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

跨度，颜色等...

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

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

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

答

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

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

相关推荐