我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。
当前回答
你可以使用标签画布并“绘制”背景，这在IE9、Gecko和Webkit上都可以使用。
其他回答
你可以使用标签画布并“绘制”背景，这在IE9、Gecko和Webkit上都可以使用。
两个解决方案的工作(至少在现代Chrome -还没有测试超越):
!重要的权利在常规的CSS声明作品(甚至不是在@media打印) 使用svg
在某些情况下(没有任何内容，但有背景的块)，可以使用边框单独覆盖每个块。
例如:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
@media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
还有一个技巧，你可以不用激活打印边框选项，在其他文章中提到过。因为边界是打印出来的，你可以用下面的方法模拟纯色背景:
.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+)。
试试这个，它为我谷歌Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
