如何使文本浮动在图像HTML CSS的顶部
[英]How to make text float on top of an image html css
问题描述
I have the following html code to make the 'bottom' div float on top of the image. 
我有以下html代码，以使“底部” div浮在图像顶部。 I have 3 images on one table row. 我在一排桌子上有3张图片。
<td>
<img src="adele.jpg" alt="Adele">
<div id="bottom">
<h4 class="topText">ALBUM</h4>
<h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
</div>
</td>
this is my css: 这是我的CSS：
#bottom{
position: absolute;
display: inline-block;
bottom: 0px;
left:0px;
}
#positionAnchor {
position: relative;
}
also as you can see in the image, the top pictures text is also not floating on top of the image properly. 就像您在图像中看到的那样，最上面的图片文本也没有正确地漂浮在图像的顶部。
4 个解决方案
解决方案1
0 已采纳 2014-09-21 14:41:10
You need to use position:relative to set window where position:absolute will use for top, left, bottom, and right. 您需要使用position：relative来设置窗口，其中position：absolute将用于顶部，左侧，底部和右侧。
<td >
<div id="positionAnchor">
<img src="adele.jpg" alt="Adele">
<div id="bottom">
<h4 class="topText">ALBUM</h4>
<h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
</div>
</div>
</td>
#bottom{
position: absolute;
display: inline-block;
bottom: 0px;
left: 0px;
}
#positionAnchor {
position: relative;
display: inline-block;
text-align:center;
}
Otherwise it will position based on the browser screen not the parent tag. 否则，它将基于浏览器屏幕而不是父标记定位。
解决方案2
0 2014-09-21 15:01:50
Use this css 使用这个CSS
#bottom{
position: relative;
margin-top: -60%;
}
Adjust the margin according to your needs. 根据需要调整边距。
解决方案3
0 2014-09-21 15:25:40
Rather than use position absolute to get img overlapping with a div, I would recommend using the background-image property on the div instead. 我建议不要使用position absolute来使img与div重叠，而是建议在div上使用background-image属性。 Then all you would need to do is adjust the text to be centered within the div. 然后，您需要做的就是将文本调整为在div中居中。
解决方案4
0 2014-09-21 15:51:52
When you create your objects, think about it in layers. 创建对象时，请分层考虑。 (Top layer loads last.) （顶层加载最后。）
If you create two position:absolute containers for the text and images, you can "float" the text above the image. 如果您创建两个位置：文本和图像的绝对容器，则可以在文本上方“浮动”文本。
.LogoWrapper{ position:absolute; left:5px; top:3px; background-image:url("http://www.delaneysecurity.com/Images/Background/bg.png"); width:275px; } .LogoWord{ font-size:30px; font-weight:bold; color:#F0F0F0; font-family: arial; position:absolute; left:20px; top:25px; }
<HTML> <BODY> <DIV CLASS="LogoWrapper"> <IMG SRC="http://www.delaneysecurity.com/Images/Images/logocircles.png"/> </DIV> <DIV CLASS="LogoWord">Delaney Security</DIV> </BODY> </HTML>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.