1

我正在尝试在表格单元格的 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 文件中的某些规则，在打印时没有显示其他表单元素。

4

3 回答 3

1

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

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打印媒体的文本。

于 2013-03-20T19:54:32.507 回答
1

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

于 2013-03-24T12:30:46.483 回答
0

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

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

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

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

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

我希望读完这篇文章后事情会很清楚:)

谢谢你，

于 2013-03-19T12:06:30.740 回答