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解决方案,最好是一个能够处理灰度级动画的解决方案吗？我想避免使用灰度图像的服务器端黑客,因为这会弄乱我的HTML然后我将不得不做一些讨厌的浏览器检测来有条件地提供HTML.
谢谢
编辑：
由于这已成为一个“值得注意的问题”,请不要在此处发布更多仅适用于Safari 6及更高版本的答案,或者在数据网址中包含.svg文件的答案.在我编写OP的时候,对我来说很重要的是支持一些今天被认为非常过时的Safari和Firefox版本,但这仍然是我原来的问题.
我很清楚,对于现代浏览器,灰度过滤很容易用几行CSS代码完成,但是图形设计师使用的是Safari 5.x,而客户端在我做这个项目时使用的是Firefox 3.x.对我有用的解决方案是Giona建议的,即使用Modernizr测试css过滤,以及是否支持回退到javascript.
如果我今天做同样的事情,我会告诉他们去更新他们的浏览器！
解决方法
如果您使用Google“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 */
}
