CSS / JS / PS - 降低多个图像去饱和度的最佳方法

Question

我正在一个投资组合网站上工作，我的所有工作都会有不饱和的缩略图，当你将鼠标悬停在它上面时，当你徘徊时，颜色会逐渐消失。

由于此页面会有很多缩略图，我正在考虑实现此效果的最佳方法。

到目前为止我想到的是：

• 每个缩略图的黑白和彩色版本（缺点：大量带宽）
• B / W和与sprite相同的图像中的颜色（专业人士：减少服务器连接请求，缺点：大量带宽）
• 使用Javascript动态生成每个加载图像的去饱和副本（缺点：很多处理能力？）

他们是我唯一能想到的，有谁可以帮助我找出实现我所需要的最有效的方法？列出的其他建议更受欢迎。我在寻找的是：

• 使用最低带宽
• 快速而不滞后

由于

Answer 1

实现此目的的一种非常简单的方法是为img提供hover州并应用opacity。

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

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

它不完全是黑色＆amp;白色，但它确实给出了类似的效果。没有带宽添加，速度很快。

Answer 2

您可以使用Pixastic插件：

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

这声称desaturate方法适用于IE。

注意：我使用quirks模式（模拟IE 5.5）在IE中检查了这个特定的例子，它可以工作。

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

Answer 3

类似问题：Convert an image to grayscale in HTML/CSS和How do you convert a color image to black/white using Javascript?

然而，对于一个简单的解决方案和一个fadeIn / fadeOut效果 ...使用2个图像（或图像作为精灵）。

将B＆amp; W放在一个颜色（位置：绝对）下并做一些jquery ......

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