CSS로 이미지의 색상 레이어를 오버레이합니다

Question

이미지에 tinted-image 클래스가있을 때마다 투명한 빨간색 오버레이를 추가하려고합니다. CSS로 처리하려고합니다. 사실, 직접 적용하려면 img 태그를 사용하고 싶습니다. 이것이 가능한가?

<img class="tinted-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg"></img> 

그리고 CSS :

My JS fiddle

나는이 시도

.tinted-image { 

    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(0, 255, 0, 0.45), 
     rgba(0, 255, 0, 0.45) 
    ) 

} 

을 그리고 아무 일도 발생하지 않습니다.

아래처럼 div를 사용하고 싶지 않습니다. 내가 직접 img 태그에서 구현하려고합니다.

<div class="tinted-div"></div> 
.tinted-div { 
    width:200px; 
    height:200px; 
    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(0, 255, 0, 0.45), 
     rgba(0, 255, 0, 0.45) 
    ), 
    /* bottom, image */ 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); 
} 

누군가 도와주세요. :(

Answer 1

당신은 사용하여 비슷한 효과를 얻을 수 있습니다 :이 도움이 후 경우

.overlay { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.overlay:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 255, 0, 0.5); 
 
}

<div class="overlay"> 
 
    <a href="#"> 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg"> 
 
    </a> 
 
</div>

[오버레이없이 CSS를 사용하여 색조 이미지 (의