Question

我喜欢这样：

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

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

任何人都知道可能是什么原因？

由于

Answer 1

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

-webkit-print-color-adjust: exact;

Answer 2

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

Answer 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-image使用＃404040的1px x 1px像素制作成PNG。如果用户启用了图像，则可以使用，如果不是......
设置框阴影，如果不起作用......
边框= 1/2所需的高度和/或盒子的宽度，实心，颜色。在上面的示例中，我想要一个60像素高的盒子。
根据您在border属性中控制的内容，将高度/宽度归零。
除非您使用！important
将line-height设置为0以修复没有物理尺寸的框。
制作并托管自己该死的PNG;）

请参阅我的fiddle以获取更详细的演示。

Answer 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; }

TD的背景颜色在打印预览中不可见

4 个答案: