如何在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);
 }

更多在这里

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

Answer 2

您需要在相对定位的img标记上使用绝对定位的CSS .文章块上的文本块提供了在文档上放置文本的分步示例.

Answer 3

该<img>元素是空的 -它没有结束标记.

如果图像是背景图像,请使用CSS.如果是内容图像,则position: relative在容器上设置,然后将图像和/或文本绝对定位在其中.

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

使用absoluteasposition不响应+移动友好。我建议使用 adiv和 a background-image，然后将文本放置div在图像上。根据您的 html，您可能需要height使用vhvalue