Можно ли как-то залить цветом png изображение?

Question

[Анатолий]

Суть вопроса в заголовке. нужно к примеру по классу или наведению пнг изображение залить однотонным цветом, если это возможно то как, или придется использовать спрайты?

Answer 1

[kreoTech]

Если имеется ввиду вообще закрасить поверхность всю или фон тогда использовать after или before с абсолютным позиционированием и соответствующим окрашиванием.

Если же надо чтобы картинка однотонная меняла свой цвет при действиях пользователя. Тогда есть вариант просто сделать png картинку прозрачную на белом фоне. А фон блока заливать соответствующим событию цветом. Это если одной картинкой.

Comments

[Анатолий]

к примеру есть пачка логотипов серого цвета на однотонном фоне, при ховере или указании цвета, чтобы выбранный логотип окрашивался в белый. на данный момент решил через
-webkit-filter: grayscale(100%) contrast(200%)

если есть более интересные варианты, был бы рад узнать о них

[kreoTech]

Анатолий, ну так можно оставить и так.
Или можно сделать белые изображения и использовать opacity для придания им прозрачности не большой. Тогда они будут выглядеть неактивными. А при наведении убирать прозрачность. И тогда будут белые логотипы.