內側容器添加條紋/線之上後面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>