Можно ли наложить цвет на png?

Question

[Виталий]

Есть такие иконки по кругу. Они синие, но при наведении они становятся белыми. В макете картинки, а не векторы.
Есть какой-то трик, чтоб покрасить эти картинки ?

Answer 1

[Сергей Горячев]

https://jsfiddle.net/webirus/bjvLju44/

Answer 2

[Astrohas]

отвекторить через inkscape?

Comments

[Виталий]

это svg ?

[Astrohas]

Виталий: да

[Astrohas]

Виталий: если png только сами контуры, можете filter использовать

[Виталий]

Хасан Истамкулов: да, только контуры

[Виталий]

Хасан Истамкулов: то есть, нужно, чтоб бекграунд не менялся. Только контуры иконки

[Astrohas]

Виталий:.circle>.icon
у вас же такая структура будет. а для .icon в ссс через филтер настраиваете цвет

Answer 3

[Виталий]

background-blend-mode ?

Answer 4

[display: block]

Можешь попробовать css-фильтры (filter:), посмотри поддержку свойства в caniuse.
Но проще перевести иконку в вектор с помощью редактора векторных изображений. Бесплатный Inkscape подойдет вполне.

Есть ещё вариант. В фотошопе дополнительно сделать белую иконку, а в браузере с помощью свойств transition для плавного перехода в состояние и opacity:0 для затухания синего оригинала и opacity:1 (изначально у этой иконки 0) для появления белой иконки. Только спозиционировать две картинки надо точь-в-точь.

spoiler

Только зачем геморрой себе создавать?

Comments

[Сергей Горячев]

Можешь попробовать css-фильтры (filter:), посмотри поддержку свойства в caniuse.

Тут самое простое будет - фильтры.
Делаем серым и переводим констраст.
Сама картинка на прозрачном, фон не пострадает.

[Виталий]

а если заюзать inkscape, то как потом этот вектор вставить в хтмл?

Answer 5

[Андрей Шестаков]

Я бы на вашем месте воспользовался векторной графикой и окрашивал иконки через CSS.