superposer un calque de couleur dans une image avec CSS

Question

J'essaie d'ajouter une superposition rouge transparent à une image chaque fois que l'image a une classe tinted-image, je veux le faire avec CSS. En fait, je veux l'appliquer directement img tag. Est-ce possible?

My JS fiddle

J'ai essayé ceci:

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

et CSS:

.tinted-image { 

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

} 

Et rien ne se passe.

Je ne veux pas utiliser un div, comme ci-dessous. La chose est que je veux l'implémenter directement dans la balise 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); 
} 

Aidez-moi s'il vous plaît? :(

Answer 1

Vous pouvez obtenir un effet similaire en utilisant: après si cela aide

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