CSS/JS/PS - 去饱和多个图像的最佳方法答案

【问题标题】：CSS/JS/PS - Best way to desaturate multiple imagesCSS/JS/PS - 去饱和多个图像的最佳方法
【发布时间】：2011-06-18 02:04:41
【问题描述】：

我正在开发一个作品集网站，其中包含我所有作品的不饱和缩略图，当你将鼠标悬停在它上面时，当你悬停在它上面时，颜色会淡入淡出。

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

目前我想到的是：

他们是我唯一能想到的，谁能帮我弄清楚实现我需要的最有效的方法是什么？列出的其他建议更受欢迎。我正在寻找的是：

谢谢

【问题讨论】：

如果您愿意使用 SVG，您可以创建可能有帮助的过滤器。
我需要它尽可能跨浏览器，希望 IE6 也是如此，但 IE7+ 更重要。 SVG 会和他们一起工作吗？会很快吗？
IE8 及以下不支持 SVG（支持 VML）。
我不确定抱歉，我有一段时间没有测试旧浏览器了。如果您想要 ie6 支持，您最终可能不得不使用黑白图像。您可能也遇到了褪色问题，我认为 ie6 不支持半透明。至少不是没有一些严重的黑客攻击。

【解决方案1】：

实现这一点的一个非常简单的方法是给img 一个hover 状态并应用opacity。

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

它不完全是黑白的，但它确实产生了类似的效果。不增加带宽，速度很快。

【讨论】：

嗯……不过，这实际上并不是“去饱和”。由于 IE 通常是问题，因此有一个专有的filter，并在可用的情况下使用 SVG/CANVAS (stackoverflow.com/questions/609273/…) 或 CSS 过滤器属性。
同意@Jared。正如 OP 所说，欢迎提出其他建议，我想我会给出一个。 ;-)

【解决方案2】：

您可以使用 Pixastic 插件：

这声称去饱和方法在 IE 中有效。

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

【讨论】：

【解决方案3】：

但是，对于一个简单的解决方案和淡入/淡出效果...使用 2 个图像（或图像作为精灵）。

将黑白放在彩色（位置：绝对）下，然后做一些 jquery...

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

【讨论】：