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

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

当我确实需要背景颜色时，我使用边框来模拟背景。像这样的东西会起作用（但我很抱歉没有测试过这个）：

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。我只是描述使用边框替换背景的概念。您的实现将取决于页面的结构，如果您的元素没有固定的宽度或高度，则这是非常困难的。