Comment appliquer un filtre bleu foncé sur une image de curseur

Question

J'essaye depuis déjà quelques heures de faire un filtre bleu foncé! Donc, pas seulement une utilisation «échelle de gris» ou des filtres de luminosité. J'ai entendu parler de SVG et j'ai essayé de comprendre comment l'utiliser dans ce cas, mais je ne sais même pas si SVG fonctionnerait dans mon cas, j'essaierais tous ces filtres webkit, et filtrerais les propriétés, et je ne peux vraiment pas obtenir ce filtre bleu foncé

et sur Google, je ne pouvais pas trouver comment faire un filtre bleu foncé, ou un autre filtre personnalisé

je ne peux en éditant l'image moi-même, mais je vraiment besoin de le faire avec CSS, JS ou quelque chose.

je vous montre le résultat voulu:

image sans filtre

Image avec filtre

Si quelqu'un pouvait me aider en donnant quelques idées ou un code pour l'aider serait très agréable

Merci d'avance pour votre aide!

Answer 1

Ceci peut être réalisé en CSS, une approche consiste à utiliser un pseudoelement sur le conteneur d'image.

Donnez à la couleur pseudoelement la couleur d'arrière-plan que vous souhaitez et définissez un opacity. Vous pouvez utiliser ici rgba si vous le souhaitez.

div { 
 
    width: 500px; 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    background: darkblue; 
 
    opacity: .4; 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg"> 
 
</div>

Answer 2

Vous devez utiliser un wrapper

<style> 
    #Wrapper{ 
     background:url(http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg); 
     width:1300px; 
     height:1300px; 
    } 

    #Content{ 
     background-color:rgba(74, 136, 209,0.7); 
     width:100%; 
     height:100%; 
    } 
</style> 
<div id="Wrapper"> 
    <div id="Content"> 

    </div> 
</div> 

Answer 3

Venez dans le monde de <canvas> et cette tâche sera un jeu d'enfant. Par exemple. FarbicJS vous donnera beaucoup de filtres, mais assurez-vous de construire votre lib personnalisé afin qu'il ne soit pas trop grand. Ou choisissez parmi beaucoup d'autres here on github.

Je pense que celui-ci semble bien aussi: https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

Answer 4

Utilisez une combinaison de CSS filter properies ... contrast et brightness semblent fonctionner assez bien.

div { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    filter: contrast(45%) brightness(95%) 
 
}

<div> 
 
    <img src="https://i.stack.imgur.com/45yOV.jpg" alt=""> 
 
</div>