css - 在 Safari 5.x 上使用 CSS 的灰度图像

Question

我正在尝试在页面上显示一些图像，这些图像应该以灰度显示，除非在鼠标悬停时平滑过渡为彩色。我已经让它在 IE、Chrome 和 Firefox 上运行良好，但它在 Safari 5.x 上不起作用。问题出在适用于 Mac 的 Safari 和 适用于 Windows 的 Safari 上。这是我到目前为止的代码:

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

第一行加载一个外部 .svg 过滤器(我没有用 url("data:... 规则内联它，因为我想避免 a bug in old versions of Firefox )。

第二行是针对 IE 的，看起来和 filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); 一样好用。

关于 webkit 的最后一行应该适用于 Safari 6 及更高版本，以及 Chrome。

是否有任何 CSS 规则可以在 Safari 5.x 上显示灰度图像？或者，如果那不可能，有人可以推荐一种 javascript 解决方案，最好是能够处理灰度动画的解决方案吗？

谢谢

编辑:

因为这已经证明是一个“值得注意的问题”，请不要继续在此处发布更多仅适用于 Safari 6 及更高版本的答案，或在数据 URL 中包含 .svg 文件的答案。在我编写 OP 时，支持某些今天被认为非常过时的 Safari 和 Firefox 版本对我来说很重要，但这仍然是我最初的问题。

我很清楚，对于现代浏览器来说，灰度过滤可以通过几行 CSS 代码轻松完成，但图形设计师使用的是 Safari 5.x，而客户端使用的是 Firefox 3.x 在我做这个元素的时候。对我有用的解决方案是 Giona 建议的，即使用 Modernizr 测试 css 过滤，如果不支持则回退到 javascript。

如果我今天做同样的事情，我会告诉他们去更新他们的浏览器!

Answer 1

正如您在 caniuse.com 上看到的那样, 目前只有少数浏览器支持 CSS3 过滤器。

如果你谷歌“javascript grayscale plugin”，有很多 JavaScript/jQuery 回退。这里有一些:

• Grayscale.js
• jQuery GreyScale plugin
• Hoverizr
• Do it with canvas (tutorial)

但我没有使用它们的经验，所以我无法建议您哪一个是最好的。

我试过了 jQuery Black And White很久以前，它给了我很多关于相对/绝对定位图像的问题，所以也许避免它。

---

包括这个Modernizr build进入您的页面，您可以通过 Javascript 定位不支持过滤器的浏览器:

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

或 CSS:

.no-css_filters .element {
    /* css fallback here */
}

---

哦，别忘了 dowebsitesneedtolookexactlythesameineverybrowser?