如何将文字放在html图片上？

Question

如何将文本放在HTML中的图像上。每次我输入下面的代码时，文本都会显示在图像下方。

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

Answer 1

<img> element is empty - 它没有结束标记。如果图片为a background image, use CSS。如果是内容图像，则在容器上设置position: relative，然后在其中设置图像和/或文本。

Answer 2

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

Answer 3

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

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

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

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

more here

注：此slichtly篡改文档的语义。如果需要使用javascript将div注入到真实图像的位置。

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