テキストをフェードさせずにイメージオーバーレイを実行するにはどうすればよいですか？

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/ あなただけの作品へz-indexために.overlay-textは、絶対的または相対行う必要があります。また、H1タグは非常に適切ではなかった

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

、それは次のようになります。<h1 class="overlay-text"></h1> 。行方不明の>がありました。