El color de fondo no se muestra en la vista previa de impresión
Estoy intentando imprimir una página. En esa página le he dado un color de fondo a una tabla. Cuando veo la vista previa de impresión en Chrome, no aparece la propiedad de color de fondo...
Entonces probé esta propiedad:
-webkit-print-color-adjust: exact;
pero todavía no muestra el color.
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>[email protected]</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>
Feb 21
'13 01:02
La propiedad CSS print-color-adjust: exact;funciona correctamente.
Sin embargo, asegurarse de tener el CSS correcto para imprimir a menudo puede resultar complicado. Se pueden hacer varias cosas para evitar las dificultades que está teniendo. Primero, separe todo el CSS impreso del CSS de la pantalla. Esto se hace a través de @media printy @media screen.
Muchas veces, simplemente configurar algo @media printde CSS adicional no es suficiente porque todavía tienes todos los demás CSS incluidos al imprimir también. En estos casos, sólo necesita tener en cuenta la especificidad de CSS, ya que las reglas de impresión no ganan automáticamente frente a las reglas de CSS no impresas.
En su caso, print-color-adjust: exactestá funcionando. Sin embargo, sus background-colordefiniciones y color están siendo superadas por otros CSS con mayor especificidad.
Si bien no recomiendo su uso !importanten casi ninguna circunstancia, las siguientes definiciones funcionan correctamente y exponen el problema:
@media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
print-color-adjust: exact;
}
}
@media print {
.vendorListHeading th {
color: white !important;
}
}
Aquí está el violín (e incrustado para facilitar la vista previa de la impresión).
Esa propiedad CSS es todo lo que necesitas, funciona para mí... Al obtener una vista previa en Chrome, tienes la opción de verla en blanco y negro (Color : Opciones: Color o Blanco y negro ), así que si no tienes esa opción, entonces Te sugiero que uses esta extensión de Chrome y te hagas la vida más fácil:
https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en
El sitio que agregó en Fiddle necesita esto en su CSS de impresión multimedia (lo tiene, solo necesita agregarlo...
CSS de impresión multimedia en el cuerpo:
@media print {
body {-webkit-print-color-adjust: exact;}
}
ACTUALIZACIÓN OK, entonces tu problema es bootstrap.css... tiene un CSS de impresión multimedia tan bien como tú... lo eliminas y eso debería darte color... debes hacer el tuyo propio o seguir con él. bootstraps imprime css.
Cuando hago clic en Imprimir en esto, veo color... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
