Firefox 过滤灰度和打印答案

【问题标题】：Firefox filter grayscale and printingFirefox 过滤灰度和打印
【发布时间】：2013-05-06 16:11:41
【问题描述】：

我遇到了一个问题，让 Firefox 的 filter css 属性在打印页面上正确地进行灰度化。出于某种原因，灰度图像在打印输出上不可见，尽管它按预期显示在屏幕上。在参考了this one之类的问题后，我已经到了这一点（简化以演示问题）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                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"); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
                filter: grayscale(100%);
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
    </body>
</html>

这是fiddle

是否有可行的解决方法，或者我做错了什么？将过滤器应用于其他元素似乎会导致相同的问题。如果有任何建设性意见，我将不胜感激。

注意：使用 Firefox v20.0.1

【问题讨论】：

+1 表示知道如何正确提出复杂的问题。
所以澄清一下，当您在屏幕上查看时，图像是灰度的，但是当您打印出屏幕内容时，灰度不会应用于打印的图像（在纸上？）。
关闭，而是灰度化的图像根本不可见。例如，即使打印小提琴页面本身也会导致仅显示彩色图像，而灰度图像不可见（尽管仍然保留布局空间）。

标签： css firefox filter grayscale

【解决方案1】：

事实证明，这似乎是 FireFox 中的一个浏览器错误。我注意到，每当（在屏幕上）引用浏览器找不到的 svg 时，我会遇到与打印时完全相同的问题：图像布局将被保留，但它将是空白空间。这促使我想知道在渲染打印机而不是屏幕时可以加载/找到的内容是否存在差异，因此我开始尝试不同的加载/引用 svg 的方式。我尝试从单独的文件、从 html 中的 id 和内联加载 svg，所有这些都与在单独的 css 文件中定义过滤器、页内类和内联样式相结合。在所有组合中，这是有效的：

在 html 中定义 svg，并使用内联样式或页内 css 类引用它。

我知道这听起来很奇怪，但实际上我尝试过的所有其他事情都会中断，包括做同样的事情，但在外部 css 文件中设置过滤器 css 属性。采用页内类方法，固定的 html 如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url(#grayscale); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <svg xmlns='http://www.w3.org/2000/svg' height="0px">
            <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>
    </body>
</html>

同样，修改后的fiddle 可以从中打印，现在可以在 Firefox 中正常查看图像。

Siiigh，这是我对 IE 的期望...希望能帮助人们节省一些时间/悲伤/谋杀的想法

【讨论】：

遗憾的是，在 Linux 上的 Chrome 43 中，fiddle 都无法打印出灰度图像。