gpt4 book ai didi

html - 将文本定位在背景图像的底部

转载 作者:太空宇宙 更新时间:2023-11-03 20:46:14 24 4
gpt4 key购买 nike

我需要在背景图像的底部放置一个文本元素。

<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
<p class="caption">Test</p>
</div>


.caption{
position: absolute;
bottom:0;
}

如您所见:http://jsfiddle.net/K98CR/

这会将元素定位在页面底部,而不是背景图像的底部。我对“底部”属性的理解是它可以相对于其父元素,但在这种情况下不起作用。

有什么我想念的吗?或任何其他方式来实现这一点?使用 margin-top 不是一个选项,因为我正在创建一个流畅的布局,这将取决于屏幕比例,我不希望这样。

我想要的是一种将元素定位在其父元素底部的方法。在这种情况下,我想将文本放置在带有“背景图像”样式的图像底部。

最佳答案

使用 postion: relative; 到你的背景图片 div 将修复它。

<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px; position: relative;">
<p class="caption">Test</p>
</div>

LIVE EXAMPLE

w3schools:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>

关于html - 将文本定位在背景图像的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20772409/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com