Как залить изображение с прозрачным фоном одним цветом через CSS?

Есть картинка (многоцветная PNG с прозрачным фоном), которую нужно залить одним цветом со стороны браузера. Желательно сохранить мягкие края как в третьем варианте, опираясь на альфа-канал. Достаточно поддержки современными браузерами (FF ~30+/Сhrome/Safari/iOS ~7+/Android ~4+). Ищу решение через CSS, если такового нет, то через JS (+jQuery).

Ответ

Конкретно в данном случае можно воспользоватся свойством filter
Оно применяет визуальные эффекты к элементам.
Предоставляет такие эффекты как: размытие (blur), яркость (brightness), контраст (contrast), инверсия цветов(invert) и т.п.
Результат его работы будет таким:
#two { filter: invert(50%); -webkit-filter: invert(50%); } #three { filter: brightness(0.0); -webkit-filter: brightness(0.0); }
invert - задается в процентах 1-100%, так и десятичных значениях 0.5.
brightness - задается в процетах 0%, так и в десятичных значениях 0.0.
Подробней о filter
Поддержка свойства браузерами: filter