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上工作。

在Safari 5.x上是否有任何CSS规则来显示灰度图像？或者，如果不可能的话，有人能推荐一种javascript解决方案，最好是处理灰度级动画的解决方案吗？我想避免服务器端攻击带有灰度图像的，因为这会破坏我的HTML，然后我必须做一些讨厌的浏览器检测才能有条件地为HTML服务。

谢谢

编辑：

由于这是一个“值得注意的问题”，请不要在这里发布更多只适用于Safari 6和更高版本的答案，或者在数据url中包含一个.svg文件的答案。在我编写OP的时候，支持某些版本的Safari和Firefox是很重要的，这些版本现在被认为是非常的版本，但这是我最初的问题。

我很清楚，对于现代浏览器来说，使用几行CSS代码__很容易完成灰度过滤，但在我做这个项目时，图形设计人员使用的是Safari5.x，客户端使用的是Firefox3.x。对我来说行之有效的解决方案是Giona建议的，即使用现代派来测试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?

Answer 2

其实很简单：

• http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
• http://jsfiddle.net/KDtAX/487/

我试着使用javascript回退，但它确实没有任何意义，而且在大型图像上速度确实很慢。这更有道理。请注意，有一个新的grayscale语法，我不得不手动编辑产生的缩小CSS从更少。

这是我的混音：

.filter (...) {
    -webkit-filter: @arguments;
    -moz-filter: @arguments;
    -ms-filter: @arguments;
    -o-filter: @arguments;
    filter: @arguments;
}

我的同学：

.grayscale-hover, .home-image {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android see http://jsfiddle.net/KDtAX/487/*/
    .filter(grayscale(1) blur(1px));
    filter: gray; /* IE6-9 */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    &:hover {
        .filter(none);
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    }
}

工作和测试在IE 6+，火狐，Chrome。

Answer 3

它是这样的：

.grayscale {    
   filter: url(css/grayscale.svg#greyscale);    
   -webkit-filter: grayscale(1);    
   -moz-filter: grayscale(100%);    
   -ms-filter: grayscale(100%);    
   -o-filter: grayscale(100%);    
} 

您也需要下载svg文件。