Chrome CSS 过滤器灰度扭曲图像/文本

Question

情况很简单：

我的页面上有内容，我想在打印时对其进行灰度化。我发现这样做的方法是使用 CSS 过滤器

.body {
    filter: Gray();
    filter: url('#grayscale');
    -webkit-filter: grayscale(1); 
    filter: grayscale(100%);
}

网站上的一切都显示正常，但在我尝试打印时会变形。

Check out the fiddle here（按 Ctrl-P 并查看第 2 页的示例。）

有人见过这个吗？我正在使用谷歌浏览器 v60.0.3112.113

Answer 1

我一直在尝试解决您的问题，我想出了一个针对文本的小解决方案，但无法针对图像进行修复。

我发现这对文本很有效：

body {
  color: red;
}
@media print {
body {
    color: #000 !important;
  }
}

无论如何我希望它会有所帮助...我将文本设置为红色只是为了证明它会在打印模式下改变颜色。文字看起来很清晰，但图像仍然是一个问题。对不起。