在Safari 5.x上使用CSS创建灰度图像

Question

在Safari 5.x上使用CSS创建灰度图像

10

我正在尝试在一个页面上展示一些图片，它们应该以灰度显示，除非鼠标悬停在上面时它们才会平滑地过渡到彩色。我已经成功地在IE、Chrome和Firefox上实现了它，但是在Safari 5.x上无法工作。问题出现在Mac版和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。

在Safari 5.x上有没有显示灰度图像的CSS规则？或者，如果不可能，可以有人推荐一个JavaScript解决方案，最好能处理灰度图像的动画效果？我想避免使用服务器端hack来生成灰度图像，因为那会搞乱我的HTML，然后我就必须进行一些恶心的浏览器检测来有条件地提供HTML。

谢谢。 编辑：

由于这已经成为一个“值得注意的问题”，请不要在此处发布仅适用于Safari 6及以上版本或包含数据URL中的.svg文件的答案。当我写下原始问题时，对我来说很重要支持一些被认为是非常过时的Safari和Firefox版本，但无论如何那就是我的原始问题。

我非常清楚对于现代浏览器，使用几行CSS代码就可以轻松实现灰度过滤，但是在我做这个项目的时候，图形设计师正在使用Safari 5.x，而客户正在使用Firefox 3.x。对我有效的解决方案是Giona建议的，即使用Modernizr测试CSS过滤功能，如果不支持，则退回到JavaScript。

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

- alexg

4个回答

1

实际上很简单：

我尝试使用JavaScript备用方案，但它真的毫无意义，并且在处理大图片时非常缓慢。这个方案更加合理。请注意，grayscale有新的语法，我需要手动编辑来自LESS的压缩CSS。

下面是我的mixin:

.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的程序已经进行过测试。

- user1429980

嘿，谢谢。非常感谢你的彻底工作，但它在Safari 5.1中是否可以正常工作，就像我在我的OP中提到的那样？我现在无法访问该浏览器。正如我在OP中也提到的那样，使用“data：”url内联svg过滤器在一些旧版本的FF中不起作用（例如4.0.1）。 - alexg

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不支持这种转换。

- Rikard Isacsson

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文件。

- Molnar Raul

欢迎来到 Stack Overflow！感谢您发表您的回答！请务必仔细阅读有关自我推广的FAQ。还请注意，每次链接到您自己的网站/产品时，必须发布免责声明。我正在删除您的链接，以免被标记为垃圾邮件。 - Andrew Barber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Giona · Accepted Answer

正如您在caniuse.com上所看到的，在目前时刻，支持CSS3滤镜效果的浏览器非常少。

如果您在Google上搜索"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 */
}

哦，不要忘记网站在每个浏览器中看起来需要一样吗？