在撰写本文时,此方法仅适用于Chrome 18+,但它是标准化的,因此最终所有浏览器都将支持。
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
我期待着
Dave,我在这里做了一些类似的东西。
Dave:只需使用{filter: grayscale(0%); },你还可以使用过渡效果。查看这个dabblet:http://dabblet.com/gist/2916403
我试图在我的博客社交图标中使用这段代码,但效果不佳
Chrome – 非常好的效果,图标显示为灰度
IE – 图标显示为彩色
Firefox – 图标根本不显示
我认为是这一行代码不起作用
我在body标签打开时使用了引用的URL中定义的svg过滤器。
有什么解决方法吗?
对我来说,它在IE10上不起作用,如何在IE10上实现它?
在ie 10上不起作用
注意!这在2012年可能运行良好,但在2018年在打印样式表中使用filter()彻底搞砸了Safari的打印质量,在使用Mojave的Mac上的Firefox中情况更糟。今天让我调试了大约3个小时,还损失了一大把头发。
打印质量?很有意思。看看应用了灰度过滤器的图像和未应用灰度过滤器的图像的打印输出照片会很有趣。
是不是很疯狂?我在测试和调试期间打印了很多页。以下是两页的近景:https://i.imgur.com/0mwUWvR.jpg
左侧的页面是在打印样式表仍然包含filter()规则时打印的。右侧的页面是在我注释掉规则后的同一页面。
这似乎只是在OSX上出现的问题。并且问题在Firefox中特别明显,虽然Safari的打印输出也有锯齿。