打印预览中未显示背景颜色 [英] Background color not showing in print preview

问题描述

我正在尝试打印一页.在该页面中，我为表格指定了背景颜色.当我在 chrome 中查看打印预览时，它没有采用背景颜色属性...

所以我尝试了这个属性:

-webkit-print-color-adjust:精确；

但仍然没有显示颜色.

http://jsfiddle.net/TbrtD/

.vendorListHeading {背景颜色:#1a4567；白颜色;-webkit-print-color-adjust:精确；}<div class="bs-docs-example" id="soTable" style="padding-top: 10px;"><table class="table" style="margin-bottom: 0px;"><头><tr class="vendorListHeading" style=""><第>日期</th>《第 PO 号》<th>Term</th><th>税</th><第>报价编号</th><th>状态</th><th>Account Mgr</th><th>运输方式</th><th>运输账户</th><th style="width: 184px;">QA</th><th id="referenceSO">参考</th><th id="referenceSO" style="width: 146px;">最终用户名</th><th id="referenceSO" style="width: 118px;">最终用户的 PO</th><th id="referenceSO" style="width: 148px;">Tracking Number</th></tr></thead><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>批准</td><td>PDF</td><td id="referenceSO">12/23/2012</td><td id="referenceSO">已批准</td></tr></tbody>

解决方案

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 打印 {tr.vendorListHeading {背景颜色:#1a4567 ！重要；-webkit-print-color-adjust:精确；}}@media 打印 {.vendorListHeading th {颜色:白色！重要；}}

这是fiddle(和嵌入 以便于打印预览).

I am trying to print a page. In that page I have given a table a background color. When I view the print preview in chrome its not taking on the background color property...

So I tried this property:

-webkit-print-color-adjust: exact; 

but still its not showing the color.

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>

解决方案

The Chrome CSS property -webkit-print-color-adjust: exact; works appropriately.

However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print and @media screen.

Often times just setting up some extra @media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.

In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.

While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:

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

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

Here is the fiddle (and embedded for ease of print previewing).

这篇关于打印预览中未显示背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！