对投资组合图像使用 CSS3 灰度滤镜。在Chrome,Firefox,Safari 7和iOS中看起来很棒。
图片-铬 30: 铬 30 http://pikku.co/test/chrome-hover.png
图片-火狐24:火狐24 http://pikku.co/test/firefox-hover.png
Safari 6 中的对比度过载。灰色完全被吹掉,黑色过饱和。
图片-野生动物园 6: 野生动物园 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
只需组合过滤器:
-webkit-filter: grayscale(100%) contrast(.5);