我正在尝试打印页面。在该页面中,我为表格提供了背景色。当我在chrome中查看打印预览时,它不具有背景色属性…
所以我尝试了这个属性:
-webkit-print-color-adjust: exact;
但仍然没有显示颜色。
.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>
Chrome CSS属性-webkit-print-color-adjust: exact;可以正常工作。
但是,确保您拥有正确的CSS进行打印通常很棘手。可以做几件事来避免您遇到的困难。首先,将所有打印CSS与屏幕CSS分开。这是通过@media print和完成的@media screen。
@media print
@media screen
通常,仅设置一些额外的@media printCSS是不够的,因为在打印时您仍然包括所有其他CSS。在这些情况下,您只需要了解CSS的特殊性,因为打印规则不会自动与非打印CSS规则抗衡。
在您的情况下,-webkit-print-color-adjust: exact可以正常工作。但是,您background- color和颜色的定义已被其他具有更高特异性的CSS击败。
-webkit-print-color-adjust: exact
background- color
尽管我几乎在任何情况下 都 不赞成使用!important,但以下定义可以正常工作并暴露问题:
!important
@media print { tr.vendorListHeading { background-color: #1a4567 !important; -webkit-print-color-adjust: exact; } } @media print { .vendorListHeading th { color: white !important; } }