gpt4 book ai didi

css - 将带有背景图像的 Div 覆盖在带有照片的 div 上

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

我正在尝试将其中包含背景图像的 div 覆盖在包含使用图像标签的照片的 div 上。需要带有背景图像的 div,因为 # 将出现在 bg 图像上方的那个 div 中,并且这两个都将出现在照片的顶部。

简单来说:我试图将一个 div 放在另一个 div 之上。抱歉,我还无法绝对路径图像,但我认为不管怎样,一个概念都会起作用。

我的代码是:

<div id="contestLeaders">
<div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
<div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
<div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
<div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
<div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>
<div class="leaderRating">5.0</div>

CSS:

#contestLeaders {overflow:hidden;}
#contestLeaders .leader {float:left; margin-right:4px;}
.leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;}

最佳答案

感谢大家的帮助。这就是我设法让它发挥作用的方式:

CSS

#contestLeaders
{
overflow:hidden;
margin-bottom:30px;
position: relative;
}
.leader
{
float:left;
margin-right:4px;
}
.leaderRating
{
background:url(images/leader-rating-bg.png) no-repeat;
width:138px;
height:37px;
color:#fff;
font-size:18px;
padding:10px 0px 0px 35px;
position: absolute;
top:90px;
}

HTML

<div id="contestLeaders">
<div class="leader"><div class="leaderRating">5.0</div><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
<div class="leader"><div class="leaderRating">4.7</div><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
<div class="leader"><div class="leaderRating">4.2</div><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
<div class="leader"><div class="leaderRating">3.5</div><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
<div class="leader"><div class="leaderRating">2.8</div><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>

关于css - 将带有背景图像的 Div 覆盖在带有照片的 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11779802/

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