Firefox打印CSS中表格单元格的不透明度答案

【问题标题】：Opacity on table cells in Firefox print CSSFirefox打印CSS中表格单元格的不透明度
【发布时间】：2013-02-23 01:57:05
【问题描述】：

我正在尝试在表格单元格的 print.css 文件中应用不透明度。使用 Firefox 打印时，这些不透明的单元格是完全不可见的。由于页面上的其他元素，打印是在未选中“打印背景颜色和图像”的情况下完成的。然而在 Chrome 上打印是正确的，某些 td 单元格褪色但仍然出现在原地。

样式表参考：

<link rel="stylesheet" type="text/css" href="style.css"/>
<link type="text/css" href="print.css" rel="stylesheet" media="print" />

print.css 文件中的相关 CSS 规则：

td.fade {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: .3;
}

所有 td 元素都有一些先前的规则，但没有任何与不透明度冲突的规则。此规则是 print.css 中适用于表格单元格或父级的最后一条规则。

另一个奇怪的问题是 Firefox 中的打印预览显示好像可以正确打印，但实际上并没有。 Firefox 在 print.css 中显示不透明度是否存在错误？我知道正在使用 print.css，因为由于 print.css 文件中的某些规则，打印时没有显示其他表单元素。

【问题讨论】：

顺便说一句，我正在测试的 Firefox 版本是当前版本 19.0
如果您正在处理纯色（不是图像），请尝试使用 rgba 颜色而不是不透明度
打印不是 Firefox 开发中最受关注的话题。曾经提交过这个错误：bugzilla.mozilla.org/show_bug.cgi?id=262019 这个例子：fvsch.com/code/bugs/ff4-print-opacity 你在哪个操作系统上？
顺便说一句，永远不需要在属性值处以 0 开头。
如果您甚至不打印任何背景颜色/图像，为什么还要打印不透明度？如果这只是为了让布局在屏幕上看起来不错，您可以覆盖打印样式表中的 opactiy。（或者反过来，为 media=print 声明不透明度。）

标签： css google-chrome firefox opacity printing-web-page

【解决方案1】：

moz-opacity 是一种方式，rgba 颜色代码还有另一种方式，它具有 alpha 值，可以使颜色具有透明度..

【讨论】：

【解决方案2】：

Rafe 在评论中提到了这一点，但我不知道他为什么没有提供它作为答案。使用 rgba() 颜色可以在 Firefox 中打印褪色文本。 Example fiddle 使用此代码：

HTML

<table>
    <tr><td>Test No Fade</td></tr>
    <tr><td>Test Fade 70%</td></tr>
    <tr><td>Test Fade 50%</td></tr>
    <tr><td>Test Fade 30%</td></tr>
</table>

CSS

tr + tr td {
    color: rgba(0,0,0,.7);
}
tr + tr + tr td {
    color: rgba(0,0,0,.5);
}
tr + tr + tr + tr td {
    color: rgba(0,0,0,.3);
}

由于您不打印背景颜色和图像，因此我建议您将所有 .fade 类切换到 rgba() 以获取打印媒体文本的 color。

【讨论】：

【解决方案3】：

Crome 打印是使用他们内置的单独驱动程序完成的，该驱动程序从页面获取图像（如快照）并传输到打印机，以验证，安装 PDF 打印机并打印页面，页面将以图像的形式，文本不可选择。

现在打印不透明度。它只是一个 media="screen" 效果。在 media="print" 中，这将不适用于打印机，因为文件假脱机将逐个字符完成（或逐行，但将在打印机中应用。）

解决方案：对于 print.css 或 media="print" 我有一件事要说，

降低颜色对比度。如果边框颜色：#000;对于 opacity 0.3 可能会导致附近的颜色为：#888。

这样就可以了，不透明度是过滤器，适用于屏幕的，在打印机上不起作用。

我希望读完这篇文章后一切都清楚了:)

谢谢你，

【讨论】：