我有一个 HTML“报告”页面，其中包含一个 HTML 视图，如下所示：
不过，当您打印预览时，它看起来就不那么好看了 :)
我知道用于打印的 CSS，但我不明白我的 HTML 是如何被这样解释的 - 例如，为什么我的蓝色边框很好，但我的彩色框（实际上只是里面的空 div一个 td 单元格）根本不会出现在打印预览中。还有，为什么左边黑底白字不能这样打印？
对于打印友好的 css 是否有一些规则？这里有什么建议吗？
顺便说一句 - 我尝试在 IE 10 和 chrome 中预览 - 两者几乎都一样
【问题讨论】：
您看不到彩色框的原因是因为颜色是通过background-color 应用的。这是过去打印 HTML 问题的主要来源之一，因此许多浏览器会忽略背景颜色和图像以使打印输出更具可读性（当文本位于“灰色”区域顶部时，在黑白打印机上很难阅读文本)。
在您的情况下，这是有问题的，因为没有文本。
Here is a question which explains how to turn background color printing on in Chrome。其他浏览器在打印对话框中有一个选项。
或者，将页面“打印”成 PDF 文件，然后使用 PDF 查看器进行打印。在这种情况下，浏览器可能会保留后台设置。
【讨论】：
检查您的浏览器是否在打印时抑制背景颜色。
【讨论】：
我猜这个问题与许多浏览器（打印时）默认忽略的“背景颜色”和“背景图像”属性有关。
对于 chrome，您可以将以下代码添加到您的打印 css，在 Firefox 和 IE 中，您必须在打印对话框中选择“打印背景”。
:root {
-webkit-print-color-adjust: exact;
}
编辑：另一种方法
由于您正在寻找一种在打印机上也提供可读信息的方法，您可以为此提供特定内容：
在您的 HTML 中：
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
在您的样式表中：
@media screen,print
{
.blue_border {border: 1px solid #00F;}
}
@media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
@media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
您还必须创建图像。这个想法是用一些小精灵替换背景，或者仅在打印机上的替代文本。这适用于任何浏览器
【讨论】：