La couleur d'arrière-plan n'apparaît pas dans l'aperçu avant impression

Question

J'essaie d'imprimer une page. Dans cette page, j'ai donné une couleur de fond à un tableau. Lorsque j'affiche l'aperçu avant impression dans chrome, il ne prend pas en compte la propriété de la couleur d'arrière-plan...

J'ai donc essayé cette propriété :

-webkit-print-color-adjust: exact; 

mais la couleur n'apparaît toujours pas.

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>

Answer 1

La propriété CSS de Chrome -webkit-print-color-adjust: exact; fonctionne de manière appropriée.

Cependant, il est souvent difficile de s'assurer que l'on dispose du bon CSS pour l'impression. Plusieurs choses peuvent être faites pour éviter les difficultés que vous rencontrez. Tout d'abord, séparez toutes vos feuilles de style CSS pour l'impression de vos feuilles de style CSS pour l'écran. Cette opération s'effectue par l'intermédiaire de l'élément @media print y @media screen .

Souvent, il suffit de mettre en place des @media print Le CSS n'est pas suffisant, car tous les autres CSS sont également inclus lors de l'impression. Dans ce cas, vous devez simplement être conscient de la spécificité des feuilles de style CSS, car les règles d'impression ne l'emportent pas automatiquement sur les règles CSS non imprimables.

Dans votre cas, le -webkit-print-color-adjust: exact fonctionne. Cependant, votre background-color et les définitions des couleurs sont battues en brèche par d'autres CSS plus spécifiques.

Alors que je ne pas approuver l'utilisation !important dans presque toutes les circonstances, les définitions suivantes fonctionnent correctement et mettent en évidence le problème :

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Voici le violon (et incorporé pour faciliter l'aperçu avant impression).

Answer 2

Cette propriété CSS est tout ce dont vous avez besoin, elle fonctionne pour moi... Lors de la prévisualisation dans Chrome, vous avez la possibilité de voir BW et Color( Couleur : Options - Couleur ou Noir et blanc ) donc si vous n'avez pas cette option, je vous suggère d'utiliser cette extension Chrome pour vous faciliter la vie :

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

Le site que vous avez ajouté sur fiddle a besoin de ceci dans votre media print css (vous l'avez juste besoin de l'ajouter...).

les feuilles d'impression CSS dans le corps de l'article :

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

MISE À JOUR OK, votre problème est bootstrap.css... il a un media print css ainsi que vous le faites.... vous l'enlevez et cela devrait vous donner de la couleur.... vous devez soit faire votre propre css ou vous en tenir au print css de bootstraps.

Lorsque je clique sur "imprimer", je vois "color....". http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Answer 3

Chrome ne rendra pas la couleur d'arrière-plan, ou plusieurs autres styles, lors de l'impression si le paramètre des graphiques d'arrière-plan est désactivé.

Cela n'a rien à voir avec css, @media ou la spécificité. Vous pouvez probablement le contourner, mais la façon la plus simple de faire en sorte que chrome affiche la couleur de fond et les autres graphiques est de cocher correctement cette case dans Plus de paramètres.

Answer 4

Je n'ai eu besoin que d'ajouter le !important sur la balise background-color pour qu'elle apparaisse, n'a pas eu besoin de la partie webkit :

background-color: #f5f5f5 !important;

Answer 5

Votre CSS doit se présenter comme suit :

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

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}