Html 通过css在chrome中显示灰度

有没有办法通过css在chrome中生成灰度图像

---

我已经尝试过最新版本的chrome，但还没有成功，但Chrome18将支持（今年晚些时候发布）。SVG过滤器仅受Firefox支持。不过，您应该能够找到一致的canvas+javascript解决方案

---

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

这里有一个HTML5解决方案。当前版本的Chrome支持：

另一个解决方案是具有间接寻址级别的svg

基本上，

其中wrapper.svg将svg过滤器应用于svg，并且svg具有指向光栅图像的图像元素。适用于Opera、Chrome、Firefox，可能还有IE10（未经测试）

---

这是一个例子。如果您先

encodeURIComponent

it，您可以传入自己的url。但是请注意，要传递参数才能正常工作，需要启用脚本，因此如果需要在元素或css背景图像中使用它，则需要在服务器上生成svg文件。

当前版本19.0.1084.46中添加了对webkit中本机css过滤器的支持

---

所以-webkit过滤器：灰度（1）将起作用，这是比SVG更好、更简单的方法用于webkit…

SVG内容中的所有浏览器（也包括IE10）都支持SVG过滤器。但确实，目前Firefox是唯一一款支持在HTML内容上直接使用svg过滤器的浏览器。是的，我应该更具体地说明上下文。哇，真是太好了！只是抬头一看；我嵌入了它，并做了两个小的调整，删除了区分大小写的URL的

.toLowerCase（）

，并且

arr

应该是一个对象

{}

。我希望在悬停图像时产生灰度效果。你的解决方案可以这样做吗？谢谢，我用建议的修复更新了上面的示例，并添加了一个动画示例：（在Opera和Firefox中运行良好。Chrome似乎无法获得mouseout事件，但这可能只是在独立加载时发生的，IE不支持SVG动画）。不过，也可以使用脚本制作动画。是的，脚本似乎是目前跨浏览器解决方案的唯一方法