我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。
当前回答
在某些情况下(没有任何内容，但有背景的块)，可以使用边框单独覆盖每个块。
例如:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
其他回答
如果用户在打印设置中关闭了“打印背景颜色和图像”，没有CSS会覆盖它，所以一定要考虑到这一点。这是默认设置。
一旦设置好，它就会打印背景颜色和图像，你所拥有的就可以工作了。
它在不同的地方被发现。 在IE9beta中，它可以在打印->页选项下的纸张选项中找到
在FireFox中，它在页面设置->[格式和选项]选项卡下的选项。
如果你想创建“打印机友好”的页面，我建议添加“!”对你的@media打印CSS很重要。这会鼓励大多数浏览器打印你的背景图片、颜色等。
例子:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
我想我应该从最近的打印css经验中添加一个最近和2015年的相关帮助。
无论打印对话框设置如何，都能够打印背景和颜色。
为了做到这一点，我必须使用!important & -webkit-print-color-adjust:exact !important的组合来正确地打印背景和颜色。
此外，在声明颜色时，我发现最顽固的地方需要直接定义目标。例如:
<div class="foo">
<p class="red">Some text</p>
</div>
和你的CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
我发现的最佳“解决方案”是提供一个突出的“打印”按钮或链接，弹出一个小对话框，大胆、简要、简洁地解释他们需要调整打印机设置(使用ABC 123项目符号指令)，以启用背景和图像打印。这对我来说非常成功。
尽管!的重要用法通常不受欢迎，但这是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;
}
}
这是因为该规则比引导默认值更具体。
