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页的示例。）

有没有人见过这个？我使用的是Google Chrome v60.0.3112.113

Answer 1

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

我发现这适用于文本：

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

我希望它有点帮助...我将文本设为红色只是为了证明它改变了打印模式下的颜色。文字看起来很清晰，但图像仍然是一个问题。遗憾。