文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS3灰度滤波器在Safari 6中的对比过载

问CSS3灰度滤波器在Safari 6中的对比过载
EN

Stack Overflow用户

提问于 2013-10-27 06:25:15

回答 1查看 1.1K关注 0票数 1

使用CSS3灰度滤波器处理组合图像。在Chrome，Firefox，Safari 7和iOS上看上去都很棒。

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

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

对比过载在Safari 6。灰被完全吹灭，黑色是过饱和。

图片-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

cross-browser

safari

safari6

css

回答 1

Stack Overflow用户

发布于 2014-01-23 07:35:34

只需合并过滤器：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19615275

复制

相似问题

问CSS3灰度滤波器在Safari 6中的对比过载
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3灰度滤波器在Safari 6中的对比过载EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3灰度滤波器在Safari 6中的对比过载
EN