Как применить цветовой фильтр к изображению через css?

#html #изображения #css

Необходимо изображение отобразить в явно заданном цветовом спектре.
В моем случае иконка полностью черная, а хотелось бы, скажем, получить красную или
оранжевую.
Яндекс преимущественно выдавал -webkit-filter, но я так и не понял как его применить
в данном случае.
Спасибо!    

Ответы

Ответ 1

Если кому нужно кроссбраузерное решение, то вот код:



.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. */
}

  
   
  
  
  



Ответ 2

http://jsfiddle.net/R2WPG/ 
http://jsfiddle.net/aSFeR/

изменяя значение hue-rotate(100deg); - получаете нужный цвет от 0 до 360 

Спецификация
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction
Поддержка браузерами
http://caniuse.com/#feat=css-filters