Question

在this sample page，我希望.snippet-text background-color: #FFF;扩展到其上方的照片，如下所示：

为什么照片优先于白色背景？

我有：

＆＃13;

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

＆＃13;

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

＆＃13;

但这些并没有什么不同。

Answer 1

如果您向两个元素添加position: relative;，那么您的z-index代码将起作用。 z-index仅适用于非静态定位元素。

给.snippet-text一个z-index，给它一个非静态位置。

＆＃13;

.snippet-text {
  position: relative;
}

＆＃13;

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

＆＃13;

但是我会使用translateY(-42px)而不是负的上边距，这也会给元素一个z-index，所以不需要指定任何z-index或位置。

Answer 2

此代码给出了您真正想要的内容。包括以下＆＃39;了解更多＆＃39; CSS

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: