如何在沒有淡化文字的情況下進行圖像疊加？

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> 。有一個失蹤的>標誌。