如何在html中将文本放在图像上？

Question

如何将文本放在HTML中的图像上。每当我输入以下代码时，文字都会出现在图片下方。

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

Answer 1

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

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

使用css background-image属性显示图像

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

<强> more here

注意：这会严重篡改文档的语义。如果需要，使用javascript将div注入真实图像的位置。

Answer 2

您需要在相对定位的img标记上使用绝对定位的CSS。文章Text Blocks Over Image提供了在图像上放置文本的分步示例。

Answer 3

<img> element is empty - 它没有结束标记。

如果图片是a background image, use CSS。如果是内容图片，请在容器上设置position: relative，然后absolutely position其中的图片和/或文字。

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

Answer 5

使用absolute作为position没有响应+移动友好。我建议将div与background-image一起使用，然后在div中放置文字，将文字放在图片上。根据您的HTML，您可能需要height使用vh值