Question

CSS背景不打印通常效果很好，但有时我用它们来传达上下文信息。什么是解决不打印但你真的想要显示的CSS背景的最佳方法。我正在研究的示例是一个显示财务信息的表。不同的背景颜色用于表示数字的“好”程度（例如非常有利可图，有利可图，中性，负面，非常负面）。

Answer 1

当我真正需要背景颜色时，我使用边框来模拟背景。这样的东西会起作用（但我为没有测试过这个而道歉）：

div.must-have-background-for-print {
    position: relative;
    width: 400px;
}
div.must-have-background-for-print div.background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 400px solid #999;
}

在回应@Steve Quezadas的评论时，我们的想法是，不是使用背景，而是将元素插入到需要背景的元素中，并对其应用极宽的边框，以便填充外部元素。这很可能要求该元素的内容也在另一个包装器内，以便它们出现在新的背景元素上面...

如果您从这开始：

<div class="has-background">Some stuff in here</div>

您可以使用此：

<div class="has-background">
    <div class="background" />
    <div class="content">Some stuff in here</div>
</div>

这非常难看，但我过去曾经使用它，它确实解决了背景颜色不能打印的问题。并且，在您提出要求之前，您必须根据具体情况调整css。我只是简单地描述了使用边框来替换背景的概念。您的实现将取决于页面的结构，如果您的元素没有固定的宽度或高度，这将非常困难。

Answer 2

我遇到了同样的问题颜色编码表格数据在html中，最终我只是转换为pdf生成彩色打印输出，只在html中提供黑白

Answer 3

这是一个浏览器设置。 Turn on background printing in IE。因此，您可以更改浏览器设置（如果在Intranet上可能），或者只是将报表导出为Excel或其他一些格式进行打印。

Answer 4

两个建议：

表格行中的颜色代码文字
将颜色编码的图标添加到表格行的开头或结尾

您甚至可以将它们与背景颜色合并到普通视图中。

Answer 5

您可以将字体设置为更大和/或粗体和/或斜体和/或彩色。

最好的方法来解决CSS背景不打印

5 个答案: