背景顏色未顯示在打印預(yù)覽中我正在嘗試打印一個頁面。在那個頁面中，我給了一張表背景顏色。當(dāng)我在chrome中查看打印預(yù)覽時，它沒有采用背景顏色屬性...所以我嘗試了這個屬性：-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>
3 回答
慕田峪4524236
TA貢獻(xiàn)1875條經(jīng)驗 獲得超5個贊
Chrome CSS屬性-webkit-print-color-adjust: exact;可以正常運行。
但是，確保使用正確的CSS進(jìn)行打印通常很棘手。可以采取一些措施來避免您遇到的困難。首先，將所有打印CSS與屏幕CSS分開。這是通過@media print和完成的@media screen。
通常只是設(shè)置一些額外的@media printCSS是不夠的，因為您在打印時仍然包含所有其他CSS。在這些情況下，您只需要了解CSS特性，因為打印規(guī)則不會自動贏取非打印CSS規(guī)則。
在你的情況下，這-webkit-print-color-adjust: exact是有效的。但是，您的background-color和顏色定義正被其他具有更高特異性的CSS打敗。
雖然我?guī)缀?strong>不支持!important在任何情況下使用，但以下定義可以正常使用并暴露問題：
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}}@media print {
.vendorListHeading th {
color: white !important;
}}添加回答
舉報
0/150
提交
取消