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

POUR CEUX QUI UTILISENT BOOTSTRAP.CSS, voici la solution !

J'ai essayé toutes les solutions et elles ne fonctionnaient pas... jusqu'à ce que je découvre que bootstrap.css avait une fonction super ennuyeuse... @media print qui réinitialise toutes vos couleurs, couleurs de fond, ombres, etc...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Il faut donc supprimer cette section de bootstrap.css (ou bootstrap.min.css)

Vous pouvez également remplacer ces valeurs dans le code CSS de la page que vous souhaitez imprimer dans votre propre code CSS. @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

Answer 2

Si vous utilisez bootstrap ou tout autre CSS tiers, veillez à ne spécifier que le media screen, afin de pouvoir contrôler le type de média d'impression dans vos propres fichiers CSS :

<link rel="stylesheet" media="screen" href="">

Answer 3

Pour IE

Si vous utilisez IE, allez dans l'aperçu avant impression (clic droit sur le document -> aperçu avant impression), allez dans les paramètres et il y a une option "imprimer la couleur d'arrière-plan et les images", sélectionnez cette option et essayez.

Answer 4

Si vous utilisez Bootstrap Il suffit d'utiliser ce code dans votre fichier css personnalisé. Bootstrap supprime toutes les couleurs dans l'aperçu avant impression.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

Answer 5

Êtes-vous sûr qu'il s'agit d'un problème de css ? Il y a des articles sur Google qui traitent de ce problème : http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Le problème peut être lié au processus d'impression. Sur safari, qui est également webkit, il y a une case à cocher pour imprimer les images et les couleurs d'arrière-plan dans la boîte de dialogue de l'imprimante.