我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。
当前回答
尽管!的重要用法通常不受欢迎，但这是bootstrap.css中令人讨厌的代码，它阻止表行以背景色打印。
.table td,
.table th {
background-color: #fff !important;
}
让我们假设你正在尝试为下面的HTML设置样式:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
要覆盖这个CSS，在你的样式表中放置以下(更具体的)规则:
@media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
这是因为该规则比引导默认值更具体。
其他回答
对于chrome，我已经使用了这样的东西，它为我工作。
在body标签中，
<body style="-webkit-print-color-adjust: exact;"> </body>
或者对于一个特定的元素，假设你有一个表格你想要填充一个td，也就是一个单元格，
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
明白了:
CSS:
box-shadow: inset 0 0 0 1000px gold;
适用于所有盒子——包括表格单元格!!
(如果pdf打印机的输出文件是可信的…?) 只在Ubuntu上的Chrome + Firefox中测试…
还有一个技巧，你可以不用激活打印边框选项，在其他文章中提到过。因为边界是打印出来的，你可以用下面的方法模拟纯色背景:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
通过将类添加到元素中来激活它:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
尽管这需要一些额外的代码和一些额外的注意来使背景颜色可见，但这是我所知道的唯一解决方案。
注意，这个hack对display: block以外的元素不起作用;或者display: table-cell;，例如<table class="your-background">和<tr class="your-background">将不起作用。
我们使用这个来获得所有浏览器的背景色(仍然需要IE9+)。
-webkit-print-color-adjust:准确;仅仅是不够的 必须在属性中使用!important
这是打印预览后，我添加!重要的每个背景颜色和颜色属性在每个标签
这是在添加之前在chrome上打印预览
现在，要知道如何注入!对div的风格很重要，看看这个答案，我无法注入一个“!”重要”规则
我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小对话框，大胆、简要、简洁地解释他们需要调整打印机设置(使用ABC 123项目符号指令)，以启用背景和图像打印。这对我来说非常成功。
