我试图为我们的应用程序制作一个可打印的样式表,但我在@media打印的背景颜色有问题。

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

其他一切工作,我可以修改边界和这样,但背景色不会通过打印。我知道,如果没有更多细节,你们可能无法回答我的问题。我只是好奇是否有人有这个问题,或类似的,以前。


当前回答

启用Chrome后台打印:

body {
  -webkit-print-color-adjust: exact !important;
}

编辑: Chrome、Safari和Firefox浏览器:

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

其他回答

你可以使用标签画布并“绘制”背景,这在IE9、Gecko和Webkit上都可以使用。

试试这个,它为我谷歌Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

如果你想创建“打印机友好”的页面,我建议添加“!”对你的@media打印CSS很重要。这会鼓励大多数浏览器打印你的背景图片、颜色等。

例子:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

还有一个技巧,你可以不用激活打印边框选项,在其他文章中提到过。因为边界是打印出来的,你可以用下面的方法模拟纯色背景:

.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">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

尽管这需要一些额外的代码和一些额外的注意来使背景颜色可见,但这是我所知道的唯一解决方案。

注意,这个hack对display: block以外的元素不起作用;或者display: table-cell;,例如<table class="your-background">和<tr class="your-background">将不起作用。

我们使用这个来获得所有浏览器的背景色(仍然需要IE9+)。

如果用户在打印设置中关闭了“打印背景颜色和图像”,没有CSS会覆盖它,所以一定要考虑到这一点。这是默认设置。

一旦设置好,它就会打印背景颜色和图像,你所拥有的就可以工作了。

它在不同的地方被发现。 在IE9beta中,它可以在打印->页选项下的纸张选项中找到

在FireFox中,它在页面设置->[格式和选项]选项卡下的选项。