CSS/JS/PS - 最好的方式去饱和多个图像

我正在组合网站上将有我的所有工作的不饱和缩略图，当你将鼠标悬停在它上面时，当你徘徊时颜色淡入淡出。CSS/JS/PS - 最好的方式去饱和多个图像

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

我认为到目前为止是：每个缩略图的

B/W和彩色版本（缺点：大量的带宽）
B/W和颜色相同的图像小精灵（优点：更少的服务器的连接请求，缺点：大量的带宽）
使用JavaScript上即时生成的每一个载入图像（利弊去饱和副本：处理能力的很多）

他们是唯一的吗？可以想的，任何人都可以帮助我找出实现我所需要的最有效的方式吗？列出的其他建议更受欢迎。我所寻找的是：

最低带宽使用
快速，不laggy

感谢

来源

2011-06-17 Ozzy

如果你愿意使用SVG您可以创建过滤可能的帮助。 – david

我需要它作为跨浏览器，希望IE6以及IE7 +更重要。 SVG会与他们合作吗？它会很快？ – Ozzy

IE8及更低版本不支持SVG（它不支持VML）。 –

可以使用Pixastic插件：

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

这声称，去色方法在IE工作。

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

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

来源

2011-06-17 16:53:09

一个非常简单的方式实现这一目标是给img一个hover状态，申请opacity。

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

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

这不完全黑&白色的，但它确实给类似的效果。没有带宽增加，速度很快。

来源

2011-06-17 16:52:59

呃......但实际上并不是“去饱和”的。由于IE通常是问题，所以有一个专有的[filter]（http://msdn.microsoft.com/en-us/library/bb554281%28v=vs.85%29.aspx），并使用SVG/CANVAS可用（http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css）或CSS过滤器属性。 –

同意@Jared。由于OP表示欢迎其他建议，我想我会给一个。 ;-) –

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

然而，对于一个简单的解决方案和用于淡入/淡出效果 ...利用2幅图像（或图像作为子画面）。

将在B & W上的下一个颜色（位置：绝对），并做一些jQuery的...

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

来源

2011-06-17 18:04:41 Kraz

CSS/JS/PS - 最好的方式去饱和多个图像

回答

相关问题