我试图为我们的应用程序制作一个可打印的样式表，但我在@media打印的背景颜色有问题。
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作，我可以修改边界和这样，但背景色不会通过打印。我知道，如果没有更多细节，你们可能无法回答我的问题。我只是好奇是否有人有这个问题，或类似的，以前。
当前回答
还有一个技巧，你可以不用激活打印边框选项，在其他文章中提到过。因为边界是打印出来的，你可以用下面的方法模拟纯色背景:
.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的风格很重要，看看这个答案，我无法注入一个“!”重要”规则
如果你不介意使用图片而不是背景色(或者可能是带有你背景色的图片)，下面的解决方案对我来说在FireFox、Chrome甚至IE中都有效，没有任何覆盖。将图像设置在页面的某个位置，并隐藏它，直到用户打印。
页面上带有背景图像的html
<img src="someImage.png" class="background-print-img">
Css
.background-print-img{
display: none;
}
@media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
发现这个问题，因为我在谷歌应用程序脚本中从html输出生成PDF时遇到了类似的问题，其中背景颜色也没有“打印”。
-webkit-print-color-adjust:准确;重要的解决方案当然没有工作，但是盒子阴影:插入000 1000px黄金;做了……很棒的hack，非常感谢你:)
身体{ background - color: # E5FFE5; ｝ .bg_print { border-bottom: 30px solid #FFCC33; ｝ .orange_bg_print_content { margin-top: -25 px; 填充:0 10px; ｝ < div class = " bg_print”> < / div > < div class = " orange_bg_print_content”> 我的内容与背景! < / div >
测试和工作在Chrome和Firefox和Edge…
如果用户在打印设置中关闭了“打印背景颜色和图像”，没有CSS会覆盖它，所以一定要考虑到这一点。这是默认设置。
一旦设置好，它就会打印背景颜色和图像，你所拥有的就可以工作了。
它在不同的地方被发现。 在IE9beta中，它可以在打印->页选项下的纸张选项中找到
在FireFox中，它在页面设置->[格式和选项]选项卡下的选项。
