如何在不使文本褪色的情况下进行图像叠加？

Question

我正在尝试制作一张带有叠加层和一些文本的图像。我的叠加层工作正常，但文本也在褪色，这是我不想要的。我希望文本保持不变。这是我的一些代码 html:

<div class="hero">
      <div class="overlay">
        <div class="header">
          <h1 class="overlay-text"</h1>
          <p class="text-center overlay-text">SOME CONTENT HERE</p>
        </div>
      </div>
    </div>

css:

.hero {
  background-image: url('http://localhost:3000/3b1425242c422b429f78f272b0a4c0f7.jpg');
  background-size: cover;
  position: relative;
  display: block;
  min-height: 101vh;
  color: white;
}
.hero:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.2);
}
.overlay-text {
  z-index: 200;
}
.overlay-text:after {
  z-index: 200;
}

.overlay text 只是我试过的，它没有做任何事情。

Answer 1

这是一个小例子：https://jsfiddle.net/zydkz1ed/1/ 您只需要将 .overlay-text 设置为绝对值或相对值，以便 z-index 起作用：

.overlay-text {
  position: absolute;
  z-index: 200;
}

另外h1标签不太对，应该是：<h1 class="overlay-text"></h1>。缺少 > 符号。

如何在不使文本褪色的情况下进行图像叠加？

how can I do an image overlay without fading text?

css

overlay