This question has already been answered:

How can (if at all possible) change the color of the image using css? For example, there is a black icon, it needs to be made, say, red. Is this possible at all?

Reported as a duplicate member Nick Volynkin ♦ Nov 30 '16 at 7:05 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Can you please add a picture so as not to show on some kind of left (although this is also possible)? - Vadim Ovchinnikov
  • Most likely you will find the answers from here: How to apply a color filter to an image via css? . If not, edit the question, add details, why not suitable (for example, if you need support for antediluated browsers, etc.) - Nick Volynkin ♦

2 answers 2

Suppose there is a picture
enter image description here

div { width: 200px; height: 200px; background-image: url("http://lorempixel.com/output/food-qg-200-200-5.jpg"); background-color: red; background-blend-mode: multiply; } 
 <div> </div>

The background-blend-mode property has a lot of options, almost for every taste and color. https://css-tricks.com/basics-css-blend-modes/

The only negative is the complete absence of IE and Microsoft Edge. http://caniuse.com/#feat=css-backgroundblendmode

  • Yes, I ran across it when googled this question, but unfortunately it does not suit me. - Constantine Shibaev
  • one
    Can you clarify why? - Vadim Ovchinnikov
  • @ConstantineShibaev better immediately add this clarification to the question so that the other respondents can see right away. - Nick Volynkin ♦

Usually, in order to stylize icons use Font icons or SVG , if the icon is irreplaceable then any svg editor, for example, inkscape can vectorize (convert to svg) your icon, and already in svg you can upload it to your website. Here is a video where you can clearly see how to do it.

  • So standard means of css / css3 can not change the original color of the raster image? - Constantine Shibaev
  • @ConstantineShibaev, only if by filters somehow - Yuri
  • You can only apply filters to the raster. habrahabr.ru/post/144852 , more in the article with examples, but support in browsers is still rather weak. The most optimal way to remake an icon in svg or change it in Photoshop) - junior-web-dev
  • @ junior-web-dev ok, thank you - Constantine Shibaev