TDs 背景颜色在打印预览中不可见答案

【问题标题】：TDs background color not visible in print previewTDs 背景颜色在打印预览中不可见
【发布时间】：2010-12-30 02:12:37
【问题描述】：

我是这样的：

<td align="left" bgcolor="#FF0000">

在浏览器中，应用了红色背景颜色，但是当我看到它的打印预览时，背景中没有红色。字体颜色也是白色的，但在打印预览时也会转换为白色。

有人知道是什么原因吗？

谢谢

【问题讨论】：

标签： html css browser printing

【解决方案1】：

要让 WebKit 浏览器（Safari、Google Chrome）打印背景图像或颜色，您应该将以下 css 样式添加到元素：

-webkit-print-color-adjust: exact;

【讨论】：

完美运行，谢谢 Marco！

【解决方案2】：

每个浏览器支持的背景颜色打印不同，默认情况下通常是关闭的。例如，在Safari 中，它是打印对话框中称为“打印背景”的选项。我不确定该选项在其他浏览器中的位置。

【讨论】：

【解决方案3】：

我自己也遇到了这个问题，我相信我有解决方案。我最初使用 H1 标记执行此操作，但随后对 TD 使用相同的代码

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

这里有几点需要注意：

background-color 是绝对的后备颜色，主要用于后代。
background-image 使用 #404040 的 1px x 1px 像素制作成 PNG。如果用户启用了图像，它可能会工作，如果没有......
设置盒子阴影，如果这不起作用...
边框 = 1/2 所需的框高度和/或宽度，实心，颜色。在上面的示例中，我想要一个 60 像素高度的框。
根据您在边框属性中控制的内容将高度/宽度归零。
除非您使用 !important，否则字体颜色将默认为黑色
将 line-height 设置为 0 以修复没有物理尺寸的框。
制作和托管您自己的该死 PNG ;)

查看我的fiddle 以获得更详细的演示。

【讨论】：

【解决方案4】：

如果可以，请尝试使用 CSS，如果背景不适用于打印版本，请指定打印 css 文档。

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

这里是基本 CSS：

td{ background-color:#FF0000; }

【讨论】：

正如@doug-neiner 所提到的，这并不适用于所有浏览器，仅仅做 CSS 是行不通的
我没有看到 @doug-neiner 提到 CSS。 OP 还在打印时询问字体颜色。你标记了这个？
这不起作用。 Chrome 和 FF 在打印时都会忽略 CSS 背景颜色。