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

Question

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

简单来说：我试图将一个 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;}

Answer 1

感谢大家的帮助。这就是我设法使它工作的方法：

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>

Answer 2

我想您希望 .leaderRating DIV 位于其他带有图像的 DIV 之上。 要实现这一点，请尝试以下修改：

• 将覆盖的 DIV (.leaderRating) 放入主容器 (#contestLeaders)
• 添加以下 CSS 样式： { position: relative; } 用于容器和 { position: absolute;顶部：0； } 用于覆盖

这样，您就可以相对于容器对叠加层进行绝对定位。 最后，你应该想出以下代码：

HTML：

<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 class="leaderRating">5.0</div>

                </div>

CSS：

#contestLeaders {溢出：隐藏；位置：相对； } #contestLeaders .leader {浮动：左；边距右：4px;} .leaderRating {background:url(images/leader-rating-bg.png) 不重复；宽度：138px；高度：37px；颜色：#fff；字体大小：18px；填充：10px 0px 0px 35px；位置：绝对；顶部：0； }