9

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

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

第一行加载一个外部 .svg 过滤器（我没有用url("data:... 规则内联它，因为我想避免旧版本 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 版本对我来说很重要，但那是我最初的问题。

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

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

4

4 回答 4

9

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

如果你谷歌“ javascript grayscale plugin ” ，会有很多 JavaScript/jQuery 后备。这里有一些：

但是我对他们没有经验，所以我不能建议你哪个是最好的。

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

将此Modernizr 构建到您的页面中，您可以通过 Javascript 定位不支持过滤器的浏览器：

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

或 CSS：

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

哦，别忘了网站是否需要在每个浏览器中查看完全相同的内容？

于 2012-10-02T07:18:07.190 回答
1

其实很简单：

我尝试使用 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 中工作和测试。

于 2013-04-26T05:03:48.013 回答
0

这是这样的：

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

您也需要下载 svg 文件。

于 2013-03-09T11:24:15.100 回答
0

这对我很有用：

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 不支持过渡。

于 2013-05-21T12:40:28.870 回答