在img后面的背景颜色上面的容器中添加条纹/线条

Question

附加的图像将清除它..

我创建了一个容器流体并给它一个颜色，然后将PNG图像添加到该容器的中心。现在我想添加一个带有另一种颜色的条纹/线，使其高于容器的背景颜色，但在img PNG下方/下方

请注意，它应该是容器的响应和全宽。

.bg-1 {
  background-color: #79d4bd;
  color: #ffffff;
}

.container-fluid1 {
  padding-top: 10px;
  padding-bottom: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid1 bg-1 text-center">
  <img src="nwaf.png" class="img-responsive img-circle margin" style="display:inline" alt="nwaf" width="300" height="193">
</div>

作为附加图像

由于

Answer 1

您可以在父级和z-index上使用绝对定位的伪元素来控制重叠。您可以使用top和translateY()来偏移条纹的位置。

.bg-1 {
  background-color: #79d4bd;
  color: #ffffff;
}

.container-fluid1 {
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
}

.container-fluid1:before, .container-fluid1:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  background: yellow;
  height: 2.5em;
}

.container-fluid1:before {
  height: 5em;
  z-index: -1;
  transform: translateY(-35%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid1 bg-1 text-center">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-responsive img-circle margin" style="display:inline" alt="nwaf" width="300" height="193">
</div>