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

Question

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

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

到目前为止我想到的是:

• 每个缩略图的黑白和彩色版本(缺点:占用大量带宽)
• 与 Sprite 相同的图像中的黑白和颜色(优点:服务器连接请求较少，缺点:占用大量带宽)
• 使用 Javascript 即时生成每个加载图像的去饱和副本(缺点:处理能力很强？)

它们是我唯一能想到的，任何人都可以帮助我找出实现我需要的最有效的方法吗？所列建议中的其他建议也非常受欢迎。我正在寻找的是:

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

谢谢

Answer 1

实现此目的的一个非常简单的方法是为 img 提供 hover 状态并应用不透明度。

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

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

它并不完全是黑白的，但它确实给出了类似的效果。没有增加带宽，而且速度很快。