Question

我正在尝试将包含背景图像的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;}

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 {overflow:hidden; position: relative; }
    #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; position: absolute; top: 0; }

在div上覆盖带有背景图像的Div，其中包含照片

2 个答案: