如何在没有淡化文字的情况下进行图像叠加？

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文本只是一些我试过了，没有做任何事情。

Answer 1

这里是一个小例子：https://jsfiddle.net/zydkz1ed/1/ 你只需要做出.overlay-text绝对或相对为了z-index到作品：

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

而且h1标签是不完全正确，应该是：<h1 class="overlay-text"></h1> 。有一个失踪的>标志。