如何将文本放在HTML中的图像上。每当我输入以下代码时,文字都会出现在图片下方。
<img src="example.jpg">Text</img>
答案 0 :(得分:26)
您可以创建一个与图像完全相同的div。
<div class="imageContainer">Some Text</div>
使用css background-image属性显示图像
.imageContainer {
width:200px;
height:200px;
background-image: url(locationoftheimage);
}
<强> more here 强>
注意:这会严重篡改文档的语义。如果需要,使用javascript将div注入真实图像的位置。
答案 1 :(得分:23)
您需要在相对定位的img
标记上使用绝对定位的CSS。文章Text Blocks Over Image提供了在图像上放置文本的分步示例。
答案 2 :(得分:19)
<img>
element is empty - 它没有结束标记。
如果图片是a background image, use CSS。如果是内容图片,请在容器上设置position: relative
,然后absolutely position其中的图片和/或文字。
答案 3 :(得分:14)
你可以试试这个......
<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%;
}
答案 4 :(得分:1)
使用absolute
作为position
没有响应+移动友好。我建议将div
与background-image
一起使用,然后在div
中放置文字,将文字放在图片上。根据您的HTML,您可能需要height
使用vh
值