Safari 6中使用CSS3灰度过滤器的对比度过载

时间:2013-10-27 06:25:16

标签: css3 cross-browser safari safari6

对投资组合图像使用CSS3灰度过滤器。在Chrome,Firefox,Safari 7和iOS中看起来很棒。

图片 - Chrome 30: Chrome 30 http://pikku.co/test/chrome-hover.png

图片 - Firefox 24: Firefox 24 http://pikku.co/test/firefox-hover.png

Safari 6中的对比度过载。灰色完全被吹灭,黑色过饱和。

Image-Safari 6: Safari 6 http://pikku.co/test/safari-hover.png

代码:

img.grayscale {
    /* Firefox 10+ */
    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");
    /* IE6-9 */
    filter: gray;
    /* Chrome 19+ & Safari 6+ */
    -webkit-filter: grayscale(100%);
    /* Fade to color for Chrome and Safari */
    -webkit-transition: all .6s ease;
    /* Fix for transition flickering */
    -webkit-backface-visibility: hidden;
}

img.grayscale:hover {
    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");
    -webkit-filter: grayscale(0%);
}

添加对比度滤镜-webkit-filter: contrast(.5)可取消灰度效果。有关如何在Safari 6中控制对比度的任何想法?

演示网站:flowmedia.dk

1 个答案:

答案 0 :(得分:0)

只需combine过滤器:

-webkit-filter: grayscale(100%) contrast(.5);