我正在使用 Bootstrap,并具有类似于以下布局:
<div class="container stamp">
<div class="row">
Some header text
</div>
<div class="row" style="background-color:black">
More header text here
</div>
<div class="row">
More text
</div>
</div>
我已经设置了覆盖所有三行的背景图片
.stamp {
background-image: url('img/hugestamp.gif');
background-repeat: no-repeat;
background-position: left top;
}
如何使图像显示在第二行的背景颜色之上?
hugestamp.gif
跨越了所有三行,但第二行具有黑色背景颜色,因此部分图像被切断。我该如何使图像显示在第二行的背景颜色之上(也许使用 z-index
)?
编辑:我无法使彩色行透明。我正在尝试实现以下样式:
在图片中,您可以看到3行以及图像如何显示在彩色行的上方。