Firefox滤镜灰度和打印

我遇到了一个问题，在打印的页面上正确地将Firefox的滤镜CSS属性变为灰度。由于某些原因，灰阶图像在打印输出中不可见，尽管它在屏幕上按预期显示。提到的问题，如this one后，我已经得到了这一点（简体证明问题）：Firefox滤镜灰度和打印

<!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

来源

2013-05-06 dasch88

+1知道如何正确地问一个复杂的问题。 – 2013-05-06 16:39:27

仅仅为了澄清一下，当您在屏幕上查看时，图像是灰度的，但是当您打印出屏幕内容时，灰度不会应用于打印图像（在纸上？）。 – jezzipin 2013-05-08 15:19:19

关闭，而是灰度图像根本不可见。例如，即使打印小提琴页面本身也只会显示彩色图像，而灰度图像不可见（尽管布局空间仍然保留）。 – dasch88 2013-05-08 15:47:01

事实证明，这几乎似乎是在Firefox浏览器中的bug。我注意到，无论何时（屏幕上），当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想到的事情...希望可以帮助节省的人一段时间/悲伤/杀气的想法

来源

2013-05-09 20:06:04 dasch88

在Linux的Chrome 43上，不幸的是，这两个小提琴都不会打印灰度图像。 – 2015-05-04 13:37:34

Firefox滤镜灰度和打印

回答

相关问题