CSS / JS / PS - лучший способ обесцветить несколько изображений

Question

Я работаю над сайтом портфолио, на котором будут ненасыщенные миниатюры всей моей работы, и при наведении на нее цвет исчезает и исчезает при наведении курсора.

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

До сих пор я думал:

• Ч / б и цветные версии каждого эскиза (минусы: многопропускной способности)
• ч / б и цвет в том же изображении, что и спрайты (плюсы: меньше запросов на подключение к серверу, минусы: большая полоса пропускания)
• Использование Javascript для оперативной генерации ненасыщенных копийкаждого загруженного изображения (минусы: много вычислительной мощности?)

Они единственные, о которых я могу думать, может кто-нибудь помочь мне выяснить, какой способ достижения того, что мне нужно, является наиболее эффективным?Другие предложения из перечисленных более приветствуются.То, что я ищу, это:

• Низкая полоса пропускания
• Быстро и не задерживается

Спасибо

Answer 1

Очень простой способ добиться этого - присвоить img состояние hover и применить opacity.

img {opacity:0.5;}
img:hover {opacity:1;}

http://jsfiddle.net/jasongennaro/KV4c8/1/

Это не совсем черно-белое изображение, но оно дает похожий эффект. Пропускная способность не добавляется, и это быстро.

Answer 2

Вы можете использовать плагин Pixastic:

http://www.pixastic.com/lib/docs/#iesupport

Это утверждает, что метод desaturate работает в IE.

ПРИМЕЧАНИЕ: я проверил этот конкретный пример в IE, используя режим причуд (который имитирует IE 5.5), и он работает.

http://www.pixastic.com/lib/docs/actions/desaturate/

Answer 3

Подобные вопросы: Преобразование изображения в оттенки серого в HTML / CSS и Как преобразовать цветное изображение в черно-белое с помощью Javascript?

Однако,для простого решения и для эффекта fadeIn / fadeOut ... используйте 2 изображения (или изображения как спрайт).

Поместите черно-белое изображение под цвет (позиция: абсолютный) и сделайте несколько запросов ...

$('img.over').mouseover({function(){
   $(this).fadeOut(slow);
});
$('img.over').mouseout({function(){
   $(this).fadeIn(slow);
});