동일한 div의 오버레이 색상 및 배경 이미지

Question

이것이 가능합니까? 배경색 오버레이를 및 배경 이미지로 모두 하나의 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>

이 당신이 필요로 무엇입니까?