通过css在chrome中进行灰度答案

【问题标题】：grayscale in chrome via css通过css在chrome中进行灰度
【发布时间】：2012-02-11 01:32:40
【问题描述】：

有没有办法通过css在chrome中制作灰度图像？

我尝试过this，但在最新版本的 chrome 上不起作用

【问题讨论】：

【解决方案1】：

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

编辑：有关替代解决方案，请参阅 Erik Dahlström 的帖子。

【讨论】：

SVG 内容中的所有浏览器（也包括 IE10）都支持 SVG 过滤器。但确实，目前 Firefox 是唯一支持直接在 HTML 内容上使用 svg 过滤器的浏览器。
没错，我应该更具体地了解上下文。

【解决方案2】：

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

【讨论】：

【解决方案3】：

另一种解决方案是具有间接级别的 svg。

基本上，<img src="wrapper.svg"/> 其中 wrapper.svg 将 svg 过滤器应用于 svg，并且 svg 有一个指向您的光栅图像的图像元素。适用于 Opera、Chrome、Firefox 和可能的 IE10（未经测试）。

这是demo。如果您先encodeURIComponent，您可以传入您自己的网址。请注意，要传入参数才能工作，它依赖于启用脚本，因此如果您需要在元素或 css 背景图像中使用它，则需要在服务器上生成 svg 文件。

【讨论】：

哇，真的好甜！只是提个醒；我嵌入了它，不得不做两个小调整，删除.toLowerCase() 用于区分大小写的url，arr 应该是一个对象{}。
我想要悬停图像时的灰度效果。您的解决方案可以实现吗？
谢谢，我用建议的修复更新了上面的示例，并添加了一个动画示例：dahlström.net/svg/filters/…（在 Opera 和 Firefox 中运行良好。Chrome 似乎没有得到 mouseout 事件，可能这只是但是当独立加载时，IE 不支持 SVG 动画）。不过，也可以使用脚本来制作动画。
是的，目前看来脚本是跨浏览器解决方案的唯一方法

【解决方案4】：

从当前版本 19.0.1084.46 开始支持 webkit 中的原生 CSS 过滤器

so -webkit-filter: grayscale(1) 将起作用，并且对于 webkit 来说，这比 SVG 更好、更简单...

【讨论】：