为什么背景颜色不会显示在背景图片

问题描述：

在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>

但这些都不发挥作用。

答

如果您向两个元素添加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索引或位置。

美丽。谢谢迈克尔。 – Steve

@不用客气:) –

答

这段代码给出了你确切想要的。包括下面的 '了解更多' 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>

为什么背景颜色不会显示在背景图片

相关推荐