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; 
    } 
} 

我希望它有助於一點點反正...我做的文本顯示爲紅色只是爲了證明它改變打印模式下的顏色。文字看起來很脆，但形象仍然是一個問題。抱歉。