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

问题描述

我正在尝试打印页面。在那个页面我给了一个表的背景颜色。
当我在chrome中查看打印预览，而不是背景颜色属性...

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...

所以我试过这个属性：

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

推荐答案

Chrome css属性-webkit-print-color -adjust：exact;工作适当。

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

但是，确保您有正确的打印css通常是棘手的。可以做几个事情，以避免你遇到的困难。首先，将所有打印css与屏幕css分离。这是通过@media打印和@media屏幕。

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.

通常只是设置一些额外的@media打印css是不够的，因为在打印时还包含所有其他css。在这些情况下，您只需要知道css的特性，因为打印规则不会自动赢得非打印css规则。

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.

在您的情况下，-webkit -print-color-adjust：exact是工作。但是，您的背景颜色和颜色定义被其他具有更高特异性的CSS打败了。

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.

虽然我不支持在几乎任何情况下使用！important，定义工作正常并暴露问题：

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屋！