同じ部門のオーバーレイカラーと背景画像

Question

これは可能ですか？背景色オーバーレイを持つにはと背景画像はすべて1つのdivにありますか？以下のように：

div { 
 
    color: white; 
 
    background-color: hsla(15, 92%, 13%, 0.79); 
 
    height: 500px; 
 
    background-image: url('http://via.placeholder.com/500x500'); 
 
}

<div> 
 
    <p>Content goes here</p> 
 
</div>

ありがとう！

Answer 1

あなたはこのように擬似要素を使用することができます。

div { 
 
    position: relative; 
 
    color: white; 
 
    background-image: url('http://via.placeholder.com/500x500'); 
 
    height: 500px; 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background: hsla(15, 92%, 13%, 0.79); 
 
    z-index: 0; 
 
} 
 

 
p { 
 
    position: relative; 
 
    z-index: 2; 
 
}

<div> 
 
    <p>Content goes here</p> 
 
</div>

Answer 2

div { 
 
    color: white; 
 
    background: url('http://via.placeholder.com/500x500'); 
 
    background-color: hsla(15, 92%, 13%, 0.79); 
 
    background-blend-mode: overlay; 
 
    height: 500px; 
 
}

<div> 
 
    <p>Content goes here</p> 
 
</div>

が、これは何が必要ですか？