Colorize Background-Image

Question

Мне нужно раскрасить пост-это изображение (например, это here) в зависимости от значения rgb.

Моя проблема заключается в следующем: Внешние части изображения должны быть прозрачными, поскольку изображение помещается перед разными цветами фона.

Во-вторых, мне нужно, чтобы в настоящее время желтый цвет изображения меняется на заданное значение rgb. (не анимированный)

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

Любые идеи по этому поводу?

Спасибо заранее, Войцок

Answer 1

Вы можете сделать это тонирование изображения, нарисованное в <canvas> элементе. (См. Пример here), а затем создайте URI данных, который вы можете использовать для показа изображения.

Не уверен, что это может быть сделано с чистым CSS, но я хотел бы быть опровергнуто :)

Answer 2

Спасибо за ваши быстрые предложения!

Я уверен, что они тоже будут работать. Но я столкнулся с другим хорошим решением, которое работает для меня here.

Полностью CSS, но, конечно, он не использует изображение, как я пытался раньше.