Наложение изображения новым цветом

Question

Итак, вот моя проблема:

У меня двухцветное изображение в формате png.Один тон черный, один тон прозрачный.

В настоящее время я использую атрибут цвета фона для динамического изменения цвета прозрачного участка.

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

Спасибо за вашу помощь.

Answer 1

На данный момент webkit (и только webkit) может сделать это с помощью чистого CSS.Это действительно, действительно, действительно, не поддерживается .

Несколько ссылок для начала, если вам интересно:

• http://www.webkit.org/blog/181/css-masks/
• http://trentwalton.com/2011/05/19/mask-image-text/

Answer 2

Хорошо, canvas поддерживается большинством современных браузеров, если вы можете принять jquery в качестве решения.Вы можете попробовать этот плагин jquery.

команда довольно проста и проста:

$("#myImageID").tancolor();

Есть интерактивная демоверсия .Вы можете поиграть с ним.

Ознакомьтесь с документацией по использованию, это довольно просто. 1011 * Docs *

Answer 3

Надеюсь, я вас правильно понял.

Вы можете использовать холст элемента html5 для манипулирования изображениями вплоть до отдельных пикселей.

Попробуйте этот сайт для справки:

http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/