CSSでイメージ内にカラーレイヤーをオーバーレイする

Question

イメージに透明な赤いオーバーレイを追加しようとしていますが、イメージにはtinted-imageクラスがあるときは、CSSでそれを行います。実際には、私はそれを直接imgタグに適用したいです。これは可能ですか？

My JS fiddle

私はこの試みた：

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

とCSS：

.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>