可能重複：
Convert an image to grayscale in HTML/CSSCSS：如何將彩色圖像變成灰色或黑色/白色圖像
我怎樣才能把一個彩色圖像轉換爲灰色或黑色/像這樣的website與CSS的白色圖像？
它可以完成CSS或我需要JavaScript（jQuery）嗎？
謝謝。
編輯：
感謝您的答案傢伙。我注意到訣竅是製作兩種不同的彩色圖像 - 一種是全綵色，另一種是黑白。我希望這可以在一個單一的形象。所以沒有辦法做到這一點，除了'技巧'？
爲了讓它看起來非常甜蜜，請使用jQuery和兩者之間的淡入淡出本教程Soh Tanaka。 （我看起來像這樣的網站做了這個教程的變化。）
但是，您可以只通過創建圖像精靈和改變的背景位置CSS這樣做的：hover
在我的答案，我只處理圖像創建。
在你的情況，你會更好地使用Photoshop（等）手動預渲染去飽和的圖像。
如果您不想手動預先渲染去飽和圖像，我建議使用PHP（或任何服務器端語言）來執行此操作。
如果這不是一個選項，您可以用JavaScript來讓去飽和圖像，請參閱：http://spyrestudios.com/html5-canvas-image-effects-black-white/
在IE瀏覽器，你會需要這樣的東西：
您可以用帆布做ExplorerCanvas：http://excanvas.sourceforge.net/
你也可以試試這個jquery plugin greyScale
可以使用單個圖像完成該效果。
編輯：我也建議這個Black and white jQuery plug in Gianluca Guarini： 這是更容易修改的CSS。
+1：懸停，儘管如果您以這種方式加載大量圖片，最好將它們分開放置以加快網站的初始加載速度，然後在頁面加載後以靜默方式啓動它們。可能超出了任何用戶需求的範圍。 – 2011-05-13 14:34:52
是的沉默加載是我會做的。 – locrizak 2011-05-13 14:37:37