爲什麼背景顏色不會顯示在背景圖片

Question

在this sample page，我想.snippet-text的background-color: #FFF;延伸跨過它上面的照片，就像這樣：

爲什麼照片具有優先權在白色的背景？

我：

.snippet-image { 
 
    z-index: 998; 
 
} 
 
.snippet-text { 
 
    z-index: 999; 
 
}

<link href="http://vmpersonal.com/wp-content/themes/genesis/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/mhm-style.css" rel="stylesheet" type="text/css" /> 
 

 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Personalized Consultation</h3> 
 
     <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-body-weight-program.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Body Weight Program</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div>

但這些都不發揮作用。

Answer 1

如果您向兩個元素添加position: relative;，則您的z-index代碼將起作用。 z-index僅適用於非靜態定位元素。

通過給予.snippet-text z-index給它一個非靜態位置。

.snippet-text { 
 
    position: relative; 
 
}

<link href="http://vmpersonal.com/wp-content/themes/genesis/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/mhm-style.css" rel="stylesheet" type="text/css" /> 
 

 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Personalized Consultation</h3> 
 
     <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-body-weight-program.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Body Weight Program</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div>

但我會用translateY(-42px)，而不是負上邊距，這也會給元素的z-index的，所以沒有必要指定任何一個z索引或位置。

Answer 2

這段代碼給出了你確切想要的。包括下面的 '瞭解更多' CSS

.snippet-text { 
 
    position: relative; 
 
} 
 
.snippet-action { 
 
    position: relative; 
 
    z-index: 999; 
 
}

<link href="http://vmpersonal.com/wp-content/themes/genesis/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/style.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://vmpersonal.com/wp-content/themes/genesis-sample/mhm-style.css" rel="stylesheet" type="text/css" /> 
 

 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-personalized-consultation.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Personalized Consultation</h3> 
 
     <p>The Personalised Fitness Consultation is a premium service. The client has the opportunity to have a face-to-face conversation with Victor (VM Personal CEO), in order to develop the best... strategy towards taking your fitness to the next level.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="one-third"> 
 
    <div class="snippet"> 
 
    <div class="snippet-image"> 
 
     <img src="http://vmpersonal.com/wp-content/uploads/2017/02/product-body-weight-program.jpg" /> 
 
    </div> 
 
    <div class="snippet-text"> 
 
     <h3>Body Weight Program</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div class="snippet-action"> 
 
     <a href="#">Learn More</a> 
 
    </div> 
 
    </div> 
 
</div>