打印预览中不显示背景色

我正在试着打印一页。在该页中，我给一个表设置了背景色。当我在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>zznn@abc.co</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>

当前回答

CSS属性print-color-adjust: exact;适当的工作。

然而，确保使用正确的CSS进行打印通常是一件棘手的事情。有几件事可以避免你遇到的困难。首先，将打印CSS与屏幕CSS分开。这是通过@media打印和@media屏幕完成的。

通常情况下，仅仅设置一些额外的@media打印CSS是不够的，因为打印时还包括所有其他CSS。在这些情况下，你只需要注意CSS的特殊性，因为打印规则不会自动战胜非打印CSS规则。

在您的情况下，打印颜色调整:精确工作。然而，你的背景颜色和颜色定义正在被其他具有更高特异性的CSS打败。

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

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

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

这里是小提琴(并嵌入便于打印预览)。

2013-03-06 17:08:26

其他回答

如果你下载Bootstrap时没有“打印媒体样式”选项，你就不会有这个问题，也不需要手动删除Bootstrap .css文件中的“@media Print”代码。

2016-06-17 19:54:08

对于那些使用BOOTSTRAP.CSS，这是修复!

我已经尝试了所有的解决方案，但都不管用。直到我发现bootstrap.css有一个超级烦人的@media print，它会重置你所有的颜色，背景色，阴影等等…

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

所以要么从bootstrap。css(或bootstrap。min。css)中删除这个section

或者在你想要打印的页面的css中覆盖这些值

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

2018-08-15 15:18:24

如果你正在使用nextjs或react，将这个添加到全局css中:

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

这对我很管用。

2022-11-29 03:12:59

CSS属性是所有你需要它为我工作…在Chrome预览时，你可以选择看到它的BW和颜色(颜色:选项-颜色或黑白)，所以如果你没有这个选项，那么我建议抓住这个Chrome扩展，让你的生活更容易:

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

你在小提琴上添加的网站需要这个在你的媒体打印css(你有它只需要添加它…

媒体打印CSS在body:

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

更新你的问题是bootstrap。css。它有一个媒体打印CSS以及你做....你去掉它，就会得到颜色....你需要要么做你自己的，要么坚持用bootstrap打印css。

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

2013-02-28 17:29:50