内侧容器添加条纹/线之上后面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>