Как реализовать закраску белого рисунка на прозрачном фоне (png)?

Question

[Алексей]

Нужно сделать карточку товара, где сам товар - это бумажный шаблон, но этот шаблон можно вырезать в 9 цветах
(белый (по умолчанию), черный, красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый)
Каким образом, загружая только одну картинку (белый рисунок на прозрачном фоне) в формате png реализовать изменение цвета в верстке при клике на квадратик с цветом?

Comments

[Ankhena]

У вас два вопроса в одном.

Изменение цвета: mask, filter
По описанию изображения кажется, что больше подошел бы формат svg. И тогда ещё и fill или stroke

при клике на квадратик с цветом

Обрабатываете клик по квадратику, применяете нужный класс картинке. В классе прописываете изменение цвета.