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

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

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


当前回答

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

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

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

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

其他回答

启用Chrome后台打印:

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

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

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

两个解决方案的工作(至少在现代Chrome -还没有测试超越):

!重要的权利在常规的CSS声明作品(甚至不是在@media打印) 使用svg

我只是在打印媒体查询中添加了这个片段,所有的样式都按预期应用:

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

尽管!的重要用法通常不受欢迎,但这是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>