我正在试着打印一页。在该页中,我给一个表设置了背景色。 当我在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>

当前回答

对于那些使用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
}

其他回答

最好的解决方案,如果你正在使用bootstrap,所以只做一件事,删除@media打印{}所有代码在此。并在打印预览时从更多设置中启用背景图形。

你确定这是一个css问题吗?谷歌上有一些关于这个问题的帖子: http://productforums.google.com/forum/ !category-topic /铬/ discuss-chrome / eMlLBcKqd2s

这可能与打印过程有关。在safari(也是webkit)上,在打印机对话框中有一个用于打印背景图像和颜色的复选框。

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

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

这对我很管用。

你可以使用内联css样式!important。 如。

<p style="background:red!important">ABCD</p>

在@media print{*,:after,:before ....下的引导css文件中有一个样式},它具有标记为!important的颜色和背景样式,可以删除任何元素上的任何背景颜色。杀死这两个css,它将工作。

Bootstrap正在执行决定,你不应该在打印中使用任何背景颜色,所以你必须编辑它们的css或有另一个优先级更高的!important样式。bootstrap做得好…