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

Question

在此示例页面,我想.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-index或position.