Возможно ли раскрашивать png через css?

Question

[nuclear_kote]

Есть какая то простая png. Чего то типа такого:
Существует ли вариант раскрашивать линии в произвольный цвет средствами css ?

Answer 1

[dom1n1k]

Если svg по каким-то причинам не подходит, самый удобный вариант, пожалуй, с цветной плашкой поверх и указанным mix-blend-mode: lighten;. В этом случае цвет действительно можно контролировать, в отличие от шаманства с hue-rotate, saturate и т.п.
Но это не совсем кроссбраузерно.

Comments

[nuclear_kote]

а можно пример как это делается?

[dom1n1k]

https://codepen.io/anon/pen/ddyoYx?editors=1100
Не обязательно верстать именно так, но важно добиваться, чтобы размер плашки был в точности равен размеру картинки.
Враппер я там добавил, потому что img не умеет after, но можно и по-другому.

Answer 2

[Леонид]

png нет. Вам нужен svg

Comments

[nuclear_kote]

ну svg и ёжику понятно, кто б его еще перерисовал

Answer 3

[unsweet]

Или hue-rorate или перегонять в svg и там шаманить с цветом.

Comments

[dom1n1k]

hue-rotate тут не годится, потому что у черного цвета нет тона, нечего крутить.
Теоретически можно было бы сделать линии скажем красными, тогда тон крутить можно. Но результат будет кривым и малопредсказуемым из-за врожденных недостатков модели hsl.

Answer 4

[Igor Koch]

Можно https://jsfiddle.net/whata/r5ovdaq6/1/ но работать это будет не во всех браузерах