我正在尝试将其中包含背景图像的 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>
我是一名优秀的程序员,十分优秀!