我正在试着打印一页。在该页中,我给一个表设置了背景色。 当我在chrome浏览器中查看打印预览时,它没有采用背景色属性…

所以我尝试了这个性质:

-webkit-print-color-adjust: exact; 

但它仍然没有显示颜色。

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

当前回答

如果背景图形设置被关闭,Chrome将不会在打印时呈现背景色或其他几种样式。

这与css、@media或特异性无关。你也许可以破解它,但最简单的方法让chrome显示背景色和其他图形是正确地选中更多设置下的复选框。

其他回答

如果你正在使用引导。只需在自定义CSS文件中使用此代码。引导删除打印预览中的所有颜色。

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

你也可以使用box-shadow属性。

CSS属性print-color-adjust: exact;适当的工作。

然而,确保使用正确的CSS进行打印通常是一件棘手的事情。有几件事可以避免你遇到的困难。首先,将打印CSS与屏幕CSS分开。这是通过@media打印和@media屏幕完成的。

通常情况下,仅仅设置一些额外的@media打印CSS是不够的,因为打印时还包括所有其他CSS。在这些情况下,你只需要注意CSS的特殊性,因为打印规则不会自动战胜非打印CSS规则。

在您的情况下,打印颜色调整:精确工作。然而,你的背景颜色和颜色定义正在被其他具有更高特异性的CSS打败。

虽然我不赞成在几乎任何情况下都使用!,但以下定义可以正常工作并暴露问题:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

这里是小提琴(并嵌入便于打印预览)。

你可以从bootstrap web下载bootstrap 4 CSS,并查看底部代码 看看代码在哪里

删除这个CSS样式因为它覆盖了你的CSS颜色表样式

你确定这是一个css问题吗?谷歌上有一些关于这个问题的帖子: http://productforums.google.com/forum/ !category-topic /铬/ discuss-chrome / eMlLBcKqd2s

这可能与打印过程有关。在safari(也是webkit)上,在打印机对话框中有一个用于打印背景图像和颜色的复选框。