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

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

Ответ

Если кому нужно кроссбраузерное решение, то вот код
.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. */ }