我使用twitter-bootstrap作為我的HTML的主要樣式。

我有一個(gè)生成的表格(來(lái)自ember應(yīng)用程序),表格的每個(gè)單元格都有一個(gè)背景色來(lái)表示某個(gè)狀態(tài)。顏色是用類選擇器設(shè)置的。

這項(xiàng)工作對(duì)于屏幕來(lái)說(shuō)非常完美，但是當(dāng)打印時(shí)，我只得到白色背景色，因?yàn)閎ootstrap定義了以下內(nèi)容:

@media print {
  .table td, .table th {
    background-color: #fff !important;
  }
}

我的html看起來(lái)像這樣:

<table class-"table table-condensed>
   <tr>
     <td class="bg-color1>Content</td>
     <td class="bg-color2>Content</td>
   </tr>
</table>

我的css看起來(lái)像這樣:

.bg-color1 {
  background-color: #ababab;
}
.bg-color2 {
  background-color: #bababa;
}
@media print {
 .bg-color1 {
   background-color: #ababab;
 }
 .bg-color2 {
   background-color: #bababa;
 }
}

我用了還是不行！在印刷媒體類別描述中很重要。此外，如果我添加以下內(nèi)容來(lái)“撤銷”bootstrap中的td th設(shè)置，它將不起作用，因?yàn)檫@將超過(guò)我的類設(shè)置，所以打印時(shí)我仍然沒(méi)有得到顏色

@media print {
 .table td, .table th {
   background-color: initial !important;
  }
}

使用bootstrap的類選擇器打印時(shí)，似乎沒(méi)有辦法獲得彩色背景。有人對(duì)此有解決辦法嗎？

哦，是的，只是注意到一些東西... CSS有一個(gè)令人頭疼的偏好，你的選擇樹(shù)越大，它的優(yōu)先級(jí)越高。有關(guān)更多信息，請(qǐng)參見(jiàn)CSS規(guī)范。

舉個(gè)例子， 表& gttd優(yōu)先于td

在Bootstrap的CSS中，td被選為。表td，但是你的選擇器只是。背景色1或。背景色2

有兩種方法可以解決這個(gè)問(wèn)題。

移開(kāi)！重要的從Bootstrap的CSS和保持！在你的CSS中很重要 增加選擇器的長(zhǎng)度，比如。桌子。背景色1 我沒(méi)有證據(jù)證明這一點(diǎn)，但這是我注意到的。

如果用戶在他們的打印設(shè)置中關(guān)閉了“打印背景顏色和圖像”，沒(méi)有CSS會(huì)覆蓋它，所以總是要考慮到這一點(diǎn)。這是默認(rèn)設(shè)置。一旦設(shè)置好了，它就可以打印背景顏色和圖像，你就可以使用了。它存在于不同的地方。在IE9beta中，可以在打印->頁(yè)面選項(xiàng)中的紙張選項(xiàng)下找到它。在FireFox中是在頁(yè)面設(shè)置->[格式& amp選項(xiàng)]選項(xiàng)卡下的選項(xiàng)。

可能有幫助:

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