Safari 5.x 上带有 CSS 的灰度图像

Question

我正在尝试在页面上显示一些图像，它们应该以灰度显示，但鼠标悬停时它们会平滑过渡到彩色。我让它在 IE、Chrome 和 Firefox 上运行良好，但它在 Safari 5.x 上无法运行。问题出在 Safari for Mac 和 Safari for Windows。这是我到目前为止的代码：

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 及更高版本的答案，或者在数据 url 中包含 .svg 文件的答案。在我编写 OP 时，支持某些版本的 Safari 和 Firefox 对我来说很重要，这些版本在今天被认为是非常过时的，但这是我最初的问题。 p>

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

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

Answer 1

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

如果你在 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 */
}

---

哦，别忘了dowebsitesneedtolookexactlythesameineverybrowser?

Answer 2

其实很简单：

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

我尝试使用 javascript 后备，但它真的没有任何意义，而且在大图像上真的很慢。这更有意义。请注意，grayscale 有一个新语法，我必须从 LESS 手动编辑生成的缩小 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+、Firefox、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 文件。

Answer 4

这个对我很有用：

---

img { float:left;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all 1.5s ease;
       -moz-transition: all 1.5s ease;
        -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
            transition: all 1.5s ease;
            z-index: 40 !important;
             display:block;

 }

img:hover { 
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><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");
    -webkit-filter: grayscale(0%);}

---

然而，这些图像在 Safari 中看起来确实过度曝光（但它们是灰度的）。 Firefox 不支持转换。