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

Question

我正在尝试打印一页。在该页面中，我为表格提供了背景颜色。当我在 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>[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>

原文由 user2045025 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

通常只设置一些额外的 @media print CSS 是不够的，因为在打印时您仍然包含所有其他 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;
    }
}

这是 小提琴（为了便于打印预览而 嵌入）。

原文由 purgatory101 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

那个 CSS 属性就是你所需要的，它对我有用……在 Chrome 中预览时，你可以选择查看它的黑白和颜色（ _颜色：选项 - 颜色或黑白_）所以如果你没有那个选项，那么我建议抓住这个 Chrome 扩展，让你的生活更轻松：

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

您在小提琴上添加的网站需要在您的媒体打印 css 中使用它（您只需要添加它…

正文中的媒体打印 CSS：

 @media print {
body {-webkit-print-color-adjust: exact;}
}

更新 好的，所以你的问题是 bootstrap.css ……它和你一样有一个媒体打印 css ……你删除它并且应该给你颜色……你需要自己做或坚持引导程序打印 css。

当我点击打印时我看到颜色…. http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

原文由 Riskbreaker 发布，翻译遵循 CC BY-SA 3.0 许可协议