如何把文字放在HTML图像？

如何把文本放在HTML中的图像。 每次我input下面的代码，文本都在图像下面。

<img src="example.jpg">Text</img> 

Answer 1

你需要在相对定位的img标签上使用绝对定位的CSS。 文章“图像文字块”提供了将文字放置在图像上的分步示例。

Answer 2

<img>元素是空的 – 它没有结束标签。

如果图像是背景图像，请使用CSS 。 如果是内容图像，则在容器上设置position: relative ，然后将图像和/或文本绝对放置在容器内。

Answer 3

您可以创build一个与图像大小完全相同的div。

 <div class="imageContainer">Some Text</div> 

使用CSS背景图像属性来显示图像

  .imageContainer { width:200px; height:200px; background-image: url(locationoftheimage); } 

这里更多

注意：这一点篡改文档的语义。 如果需要使用JavaScript注入的真实图像的地方的股利。

Answer 4

你可以试试这个…

 <div class="image"> <img src="" alt="" /> <h2>Text you want to display over the image</h2> </div> 

CSS

 .image { position: relative; width: 100%; /* for IE 6 */ } h2 { position: absolute; top: 200px; left: 0; width: 100%; }