背景颜色未显示在打印预览中

Question

我正在尝试打印页面。在该页面中，我为表格提供了背景色。当我在chrome中查看打印预览时，它不具有背景色属性…

所以我尝试了这个属性：

-webkit-print-color-adjust: exact;

但仍然没有显示颜色。

.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>[e-mail]</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>

Answer 1

Chrome CSS属性-webkit-print-color-adjust: exact;可以正常工作。

但是，确保您拥有正确的CSS进行打印通常很棘手。可以做几件事来避免您遇到的困难。首先，将所有打印CSS与屏幕CSS分开。这是通过@media print和完成的@media screen。

通常，仅设置一些额外的@media printCSS是不够的，因为在打印时您仍然包括所有其他CSS。在这些情况下，您只需要了解CSS的特殊性，因为打印规则不会自动与非打印CSS规则抗衡。

在您的情况下，-webkit-print-color-adjust: exact可以正常工作。但是，您background- color和颜色的定义已被其他具有更高特异性的CSS击败。

尽管我几乎在任何情况下 都 不赞成使用!important，但以下定义可以正常工作并暴露问题：

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

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