引導：背景圖像的z-index來顯示它上面的背景顏色

Question

見筆here

我有這個圖片

代碼這是我在做什麼

<div class="container-fluid" id="contactbg"> 
     <div class="row"> 
      <div class="col-md-12 col-xs-12" id="info"> 
       <h1 >Get More Information</h1> 
       <h2>on our educational and training programs </h2> 
      </div> 
     </div> 
     <div id="pos"> 
      <div class="row" id="contact"> 
      <div class="col-md-12 col-xs-12"> 
       <div class="row"> 
        <div class="col-md-4 col-sm-4 col-xs-12"> 
         form here 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

這裏是css

#contact { 
    background:#0072d5;//blue 
    padding: 20px ; 
} 
#contact .form-control{ 
    background: transparent; 
    border-radius: 4px; 
    border-color: #fff; 

} 
#pos{position: relative;} 
#contactbg{ 
    position: relative;   
    background: url(../images/contact-bg.png) no-repeat ; 
    background-position: right center; 
    z-index: 99999999 !important; 
} 

現在這就是我得到的輸出

如何解決這個懇求幫助

Answer 1

這裏你去：codepen.io。你只需要替換類contact和contactbg。然後分別將圖像剪裁成不帶背景的position:absolute。

Answer 2

的position:relative需要改變，以position:absolute

像這樣：

#contactbg 
{ 
    position: absolute; 
    background: url(../images/contact-bg.png) no-repeat ; 
    background-position: right center; 
    z-index: 99999999 !important; 
} 

希望這有助於！