在CSS中的背景颜色上显示图像

Question

我正在使用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在第2行的背景颜色(可能是？)之上？

编辑:我无法使彩色行透明.我想在这里实现样式:

在图像中,您可以看到3行以及图像在彩色行顶部的显示方式

Answer 1

试试这个代码

在彩色行的图像

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.container{
  position:relative
}

<div class="container">
    <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 class="stamp"></div>
</div>

在包含文本的色的行的图象

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    z-index: 10;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

在色的行和在文本下的图象

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>