通過css鍍鉻的灰度

Question

有沒有辦法通過CSS在chrome中制作灰度圖像？

我試過這個，但不適用於最新版本的chrome

Answer 1

從當前版本19.0.1084.46添加了對webkit中的本機CSS過濾器的支持

所以-webkit-filter：grayscale（1）可以工作，哪種方法比SVG更好更簡單？

Answer 2

另一種解決方案是具有間接級別的svg。

基本上， <img src="wrapper.svg"/>其中wrapper.svg將svg過濾器應用於svg，svg有一個指向光柵圖像的圖像元素。 適用於Opera，Chrome，Firefox和IE10（未經測試）。

這是一個演示 。 如果你首先使用encodeURIComponent ，你可以傳入你自己的網址。 請注意，為了將參數傳遞給工作，它依賴於啟用腳本，因此如果需要在<img>元素或css背景圖像中使用它，則需要在服務器上生成svg文件。

Answer 3

還沒有，但Chrome 18將支持css過濾器 （今年晚些時候發布）。 SVG過濾器僅受Firefox支持。 您應該能夠找到一致的canvas + javascript解決方案。

編輯：請參閱ErikDahlström關於替代解決方案的帖子。

Answer 4

這是一個HTML5解決方案。 目前版本的Chrome支持： http ： //webdesignerwall.com/demo/html5-grayscale/