Question

我正在尝试在表格单元格的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文件中的某些规则而未显示其他表单元素。

Answer 1

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。

Answer 2

moz-opacity 是一种方式，还有另一种 rgba颜色代码具有alpha值的方法，可以为颜色提供透明度。

Answer 3

Crome打印是使用他们内置的单独驱动程序完成的，它从图像中获取图像，然后转移到打印机，验证，安装PDF打印机和打印页面，页面将采用图像形式，文字不可选。

现在在打印不透明度时。它只是一个媒体=＆＃34;屏幕＆＃34;影响。在媒体=＆＃34;打印＆＃34;这将不适用于打印机，因为文件假脱机将完成字符转换（或逐行，但将应用于打印机。）

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

降低色彩对比度。如果是border-color：＃000;对于不透明度0.3它可能导致附近的颜色是：＃888。

这样做，不透明度是过滤器，适用于屏幕将不适用于打印机。

我希望看完之后事情很清楚：）

谢谢，

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

3 个答案: