Есть ли плагин JQuery или что-то, чтобы иметь дело с непрозрачностью изображения на уровне пикселей на уровне пикселей

Question

В данный момент я работаю над проектом, в котором у меня есть два изображения, одно размещено поверх другого, и я хотел бы, чтобы нижнее изображение просвечивало больше, когда мышь наводит курсор на изображение, и оно мне нужно на пиксель на уровне пикселей, я попытался создать количество делений X на Y, которые были бы 1px на 1px, каждый из которых имел один и тот же фон, но сместил фон на свои позиции, чтобы верхние пиксели изображения составляли div на 1px, чтобы я мог изменить непрозрачность каждого деления при наведении курсора. Попытка этого привела к тому, что мой браузер зашел в тупик с таким количеством дел.

Есть ли способ, которым я могу сделать это (не во флэш-памяти), но так, чтобы он работал на всех браузерах достаточно быстро, чтобы он выглядел гладко и без остановки браузера?

Answer 1

Наиболее адекватным будет элемент Canvas. Это не поддерживается ВСЕМИ браузерами, только настоящие. (Internet Explorer добавил поддержку Canvas только в версии 9).

используя холст с абсолютным позиционированием над изображением, кто-то может изменить альфа-значения холста, чтобы базовое изображение "просвечивало".

Примером не производственного кода может быть этот (протестирован и работает в FF7): http://jsbin.com/uxizav/edit