擬似でオーバーレイする前に、白く残るテキストも黒く塗ります。

Question

私は、背景イメージとテキストを含む要素を持っています。 さまざまな理由から、要素はabsoluteと位置付けられています。

擬似:beforeで画像にオーバーレイを追加しました。

問題は、オーバーレイが要素内のテキストも暗くしてしまうことです。 どうすれば修正できますか？私は自分のテキストがうまく白いままにしたい！以下のような<p>上positionとhttps://jsfiddle.net/xvdk95st/

.text { 
 
    position: absolute; 
 
    background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    line-height: 25px; 
 
    color: #fff; 
 
    min-height: 400px; 
 
} 
 

 
.text::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: " "; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    z-index: 2; 
 
}

<div class="text"> 
 
    <p> 
 
    Hi, I'm some text! 
 
    </p> 
 
</div>

Answer 1

使用z-index（z-indexは常にpositionで動作するので）、：：

JSFiddle

.text p { 
    z-index: 10; 
    position: relative; 
} 

は、スニペットを見てください以下：

.text { 
 
    position: absolute; 
 
    background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    line-height: 25px; 
 
    color: #fff; 
 
    min-height: 400px; 
 
} 
 

 
.text::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: " "; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    z-index: 2; 
 
} 
 

 
.text p { 
 
    z-index: 10; 
 
    position: relative; 
 
}

<div class="text"> 
 
    <p> 
 
    Hi, I'm some text! 
 
    </p> 
 
</div>

この情報がお役に立てば幸い！あなただけの背景を暗くしたい場合は

Answer 2

、あなたは複数の背景を使用することができます。

.text { 
 
    position: absolute; 
 
    background-image: 
 
    linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
 
    url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    width: 400px; 
 
    line-height: 25px; 
 
    color: #fff; 
 
    min-height: 400px; 
 
}

<div class="text"> 
 
    <p> 
 
    Hi, I'm some text! 
 
    </p> 
 
</div>