html-coding-如何在 HTML 中的图像上放置文本？答案

【问题标题】：html-coding-how do i place a text on image in HTML?html-coding-如何在 HTML 中的图像上放置文本？
【发布时间】：2013-04-23 07:27:47
【问题描述】：

我正在为电话间隙应用程序设计这个..我想用 html 编码..

我有两个问题..

Q1)如何在图片上的不同位置放置文字？

如这里给出的图像中的 text1,text2,text3,text4。

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

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

但是，这没什么区别。

需要指导。请帮助。

我还有一个疑问……运行程序后……在页脚后面有正文的扩展部分……如果你往上拖……你可以看到那个身体是在页眉和页脚之间进行了扩展。它向右移动。编码有错误吗？

【问题讨论】：

你可以用html5画布来做

标签： html image cordova text

【解决方案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;}

您可以为跨度、颜色等添加边框...

【讨论】：

你知道吗，如何使用java脚本（动态）实现SWIPE VIEW。在基于列长度的意义上。1更多疑问我们能找到特定列的长度吗？请回复........它......非常令人困惑......对我来说......
如需滑动，请查看此链接：awwwards.com/demo/touchSwipe-gallery-demo.html
T.Baba，谢谢，但我已经实现了滑动视图...我想要类似于 VIEW HOLDER（我们在 ANDROID 中拥有）的东西
是的，使用我之前给你的链接中的那个；）

【解决方案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">

【讨论】：