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

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>

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;
    }}

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