防止图像上的叠加文本褪色

Question

我想知道如何使叠加文本保持完全不透明度，同时使文本后面的图像部分不透明。这是我的代码：

.shadow { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }

.caption {
  margin-top: -50px;
  margin-left: 10px;
}

.supporter {
  margin: 20px;
}

.redi {
  border-top: 1px solid rgba(0,0,0,.1);
  width: 94%;
  padding: 15px;
  text-transform: uppercase;
  font-weight: 800;
}

.damp {
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

<div class="card shadow">
  <img src="my-img.png" class="damp" alt="my-img">
  <p class="caption black">title</p>
  <p class="supporter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="redi">
    <a href="https://www.google.com">See link</a>
  </div>
</div>

文字很好地位于图像左下角的顶部。我的问题是，当我更改文本后面的图像的不透明度时，文本也会消失。

我已尝试过的东西：

图片
• z-index: -1;
文字
• opacity: 1;

谢谢！

Answer 1

要使否定z-index有效，您需要添加非static position值。在这里，我已将position: relative; z-index: -1;添加到图像中，并且可以执行此操作。

您也可以将z-index添加到叠加的文字中，而不是使用否定position: relative，它会使该文字的默认z-index高于图片。

＆＃13;

＆＃13;

.shadow { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }

.caption {
  margin-top: -50px;
  margin-left: 10px;
}

.supporter {
  margin: 20px;
}

.redi {
  border-top: 1px solid rgba(0,0,0,.1);
  width: 94%;
  padding: 15px;
  text-transform: uppercase;
  font-weight: 800;
}

.damp {
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
  position: relative;
  z-index: -1;
}

＆＃13;

<div class="card shadow">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="damp" alt="my-img">
  <p class="caption black">title</p>
  <p class="supporter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="redi">
    <a href="https://www.google.com">See link</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;