It is necessary to display the image in an explicitly defined color spectrum. In my case, the icon is completely black, but I would like, say, to get red or orange. Yandex mainly issued -webkit-filter, but I still do not understand how to apply it in this case. Thank!

  • Thanks for the reply soledar10! but there was another question: how to win an image that has only shades of gray? - Azat Khanov
  • No solution found. It is possible to change the color at the expense of other colors in the image, but if the picture is monochrome, it does not work. - Azat Khanov
  • Thanks to all participants! - Azat Khanov

2 answers 2

If anyone needs a cross-browser solution, here’s the code :

.fimg { position: relative; /* Нужно, чтобы абсолютно позиционированные дочерние элементы позиционировались относительно края родителя. */ display: inline-block; } .fimg img, .filter { width: 150px; height: 150px; } .filter { top: 0px; left: 0px; /* Принудительно размещаем фильтр прямо над изображением. */ z-index: 1; /* Фильтр расположен на один уровень выше изображения. */ position: absolute; /* Абсолютно позиционированный элемент. Поскольку позиционирование родителя задано как relative, позиция фильтра задаётся относительно края родителя. */ background-color: rgba(254, 128, 128, .29); /* Первые три числа -- десятичное значение цвета в RGB, четвёртое -- прозрачность, в сотых, от 0 (полностью прозрачен) до 1 (полностью непрозрачен). Запись .29 аналогична 0.29. */ } 
 <div class="fimg"> <!-- Оборачиваем фильтр и картинку в div, чтобы у них был общий родитель. --> <span class="filter"></span> <!-- Фильтр --> <img src="http://bezproblem.ucoz.ru/iconki/cerno_belye/1/02.png" alt="" /> <!-- Изображение --> </div>

  • But after all, a png with transparency will turn into a straight color of a given color. Of course, in the absence of the best, it can come in handy, but not at all. - x-positive

http://jsfiddle.net/R2WPG/

http://jsfiddle.net/aSFeR/

  • changing the value of hue-rotate (100deg); - get the desired color from 0 to 360

Specification

https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction

Browser Support

http://caniuse.com/#feat=css-filters

  • jsfiddle.net/R2WPG/1 I have a similar case. I understood the essence. here we are talking about drawings that have at least one more shade, except for gray. - Azat Khanov
  • Not at all cross-browser. In IE and Firefox will not work. Meaning? - Risto
  • Yet it is not worth it in place - it may work in the future - soledar10
  • If you have a solution, especially cross-browser, then I will be only too happy! - Azat Khanov
  • For cross-browser solution, use the icons of the required color - as an option - soledar10