在Chrome中通过CSS实现灰度效果

Question

有没有一种通过CSS在Chrome中制作灰度图像的方法？

我尝试过这个，但在最新版本的Chrome上无法使用。

- alex

Answer 1

从当前版本19.0.1084.46开始，Webkit支持本地CSS滤镜。

因此，-webkit-filter: grayscale (1)可用，这比对于Webkit的SVG更好且更易于操作...

- hjindal

Answer 2

另一种解决方案是使用带有间接层次的svg。

基本上，使用<img src="wrapper.svg"/>，其中wrapper.svg对svg应用了一个滤镜，而svg具有指向栅格图像的图像元素。在Opera、Chrome、Firefox和可能的IE10中运行（未经测试）。

这里是一个演示。如果您首先使用encodeURIComponent，则可以传递自己的url。请注意，要使参数传递起作用，它依赖于启用脚本，因此如果您需要在<img>元素或css背景图像中使用它，则需要在服务器上生成svg文件。

- Erik Dahlström

---

哇，这真是太棒了！只是提醒一下；我嵌入它并且必须进行两个小调整，删除 .toLowerCase() 以便对大小写敏感的 URL，并且 arr 应该是一个对象 {}。 - bennedich

当鼠标悬停在图像上时，我想要一个灰度效果。您的解决方案是否支持此功能？ - alex

谢谢，我已经根据建议进行了上述示例的更新，并添加了一个动画示例：http://dahlström.net/svg/filters/make-grayscale-filter-on-hover.svg#url=boston.jpg（在Opera和Firefox中工作正常。Chrome似乎无法获取mouseout事件，可能只有在单独加载时才会发生，而IE则不支持SVG动画）。当然，也很可能使用脚本来实现此动画效果。 - Erik Dahlström

是的，目前似乎脚本编写是跨浏览器解决方案的唯一途径。 - alex

Answer 3

目前还不支持，但是Chrome 18将会支持css filters（今年晚些时候发布）。SVG filters 只有Firefox支持。不过你应该能够找到一个一致的canvas+javascript解决方案。

编辑：请参考Erik Dahlström的文章获取替代方案。

- bennedich

---

SVG滤镜在所有浏览器中都得到支持（包括IE10），但目前只有Firefox支持直接在HTML内容上使用SVG滤镜。 - Erik Dahlström

是的，我应该在上下文中更加明确。 - bennedich

Answer 4

这里有一个HTML5的解决方案。当前版本的Chrome支持：http://webdesignerwall.com/demo/html5-grayscale/

- henryaaron