La couleur d'arrière-plan ne s'affiche pas dans l'aperçu avant impression

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

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

-webkit-print-color-adjust: exact; 

mais il ne montre toujours pas la couleur.

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>

La propriété CSS Chrome -webkit-print-color-adjust: exact;fonctionne correctement.

Cependant, il peut souvent être difficile de s'assurer que vous disposez du bon CSS pour l'impression. Plusieurs mesures peuvent être prises pour éviter les difficultés que vous rencontrez. Tout d'abord, séparez tous vos CSS d'impression de votre CSS d'écran. Cela se fait via les touches @media printet @media screen.

Souvent, la simple configuration de @media printCSS supplémentaire ne suffit pas, car vous avez toujours tous vos autres CSS inclus lors de l'impression. Dans ces cas, vous devez simplement être conscient de la spécificité CSS car les règles d'impression ne gagnent pas automatiquement contre les règles CSS non imprimables.

Dans votre cas, le -webkit-print-color-adjust: exactfonctionne. Cependant, vos background-colordéfinitions de couleurs et sont battues par d'autres CSS avec une spécificité plus élevée.

Bien que je n'approuve pas l' utilisation !importantdans presque toutes les circonstances, les définitions suivantes fonctionnent correctement et exposent 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 intégré pour faciliter la prévisualisation de l'impression).

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

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

Le site que vous avez ajouté sur fiddle en a besoin dans votre css d'impression média (il vous suffit de l'ajouter ...

media print CSS dans le corps:

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

MISE À JOUR OK donc votre problème est bootstrap.css ... il a un support d'impression de média ainsi que vous .... vous supprimez cela et cela devrait vous donner de la couleur .... vous devez soit faire le vôtre ou rester avec bootstraps print css.

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

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

Cela n'a rien à voir avec css, @media ou la spécificité. Vous pouvez probablement pirater votre chemin, mais le moyen le plus simple d'obtenir du chrome pour afficher la couleur d'arrière-plan et d'autres graphiques est de cocher correctement cette case sous Plus de paramètres.

J'avais juste besoin d'ajouter l' !importantattribut sur la balise background-color pour qu'il apparaisse, je n'avais pas besoin de la partie webkit:

background-color: #f5f5f5 !important;

Si vous utilisez le bootstrap ou tout autre CSS tiers, assurez-vous de ne spécifier l'écran du support que sur celui-ci, afin de pouvoir contrôler le type de support d'impression dans vos propres fichiers CSS:

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

Votre CSS doit être comme ceci:

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

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

POUR CEUX QUI UTILISENT BOOTSTRAP.CSS, c'est la solution!

J'ai essayé toutes les solutions et elles ne fonctionnaient pas ... jusqu'à ce que je découvre que bootstrap.css avait un super ennuyeux @media printqui réinitialise toutes vos couleurs, couleurs d'arrière-plan, 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}

Donc, supprimez cette section de bootstrap.css (ou bootstrap.min.css)

Ou remplacez ces valeurs dans le CSS de la page que vous souhaitez imprimer par vous-même @media print

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

Utilisez ce qui suit dans votre @media printfeuille de style.

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Voici quelques éléments à noter:

• la couleur de fond est le repli absolu et est là pour la postérité principalement.
• background-image utilise un pixel 1px x 1px de # 404040 transformé en PNG. Si l'utilisateur a activé les images, cela peut fonctionner, sinon ...
• Définissez l'ombre de la boîte, si cela ne fonctionne pas ...
• Bordure = 1/2 la hauteur et / ou la largeur désirée de la boîte, solide, couleur. Dans l'exemple ci-dessus, je voulais une boîte de 60 pixels de hauteur.
• Remettez à zéro la hauteur / largeur en fonction de ce que vous contrôlez dans l'attribut de bordure.
• La couleur de la police sera par défaut le noir sauf si vous utilisez! Important
• Définissez la hauteur de ligne sur 0 pour corriger la boîte n'ayant pas de dimension physique.
• Créez et hébergez vos propres fichiers PNG :-)
• Si le texte du bloc doit être encapsulé, placez-le dans un div et positionnez-le en utilisant position: relative; et supprimez la hauteur de ligne.

Voir mon violon pour une démonstration plus détaillée.

Êtes-vous sûr que c'est un problème CSS? Il existe des messages sur Google concernant ce problème: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

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

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 l'option "imprimer la couleur et les images d'arrière-plan", sélectionnez cette option et essayez.

Il y a un style dans les fichiers CSS d'amorçage sous @media print {* ,: après,: avant ....} qui a des styles de couleur et d'arrière-plan étiquetés! Important, qui suppriment toutes les couleurs d'arrière-plan sur tous les éléments. Tuez ces deux morceaux de CSS et cela fonctionnera.

Bootstrap prend la décision d'exécution que vous ne devriez jamais avoir de couleur d'arrière-plan dans les impressions, vous devez donc modifier leur CSS ou avoir un autre style! Important qui a une priorité plus élevée. Bon travail bootstrap ...

J'ai utilisé la réponse de purgatory101 mais j'ai eu du mal à conserver toutes les couleurs (icônes, arrière-plans, couleurs de texte, etc.), en particulier le fait que les feuilles de style CSS ne peuvent pas être utilisées avec des bibliothèques qui modifient dynamiquement les couleurs des éléments DOM. Voici donc un script qui modifie les styles des éléments ( background-colouret colour) avant l'impression et efface les styles une fois l'impression terminée. Il est utile d'éviter d'écrire beaucoup de CSS dans une @media printfeuille de style car cela fonctionne quelle que soit la structure de la page.

Il existe une partie du script spécialement conçue pour conserver la couleur des icônes FontAwesome (ou tout élément qui utilise un :beforesélecteur pour insérer du contenu coloré).

JSFiddle montrant le script en action

Compatibilité: fonctionne dans Chrome, je n'ai pas testé d'autres navigateurs.

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

Et puis modifiez la window.printfonction pour lui faire définir les styles avant l'impression et les réinitialiser après.

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

La partie qui trouve des chemins d'icônes pour créer CSS pour: avant les éléments est une copie de cette réponse SO

Vous pouvez également utiliser la box-shadowpropriété.

si vous utilisez Bootstrap . utilisez simplement ce code dans votre fichier css personnalisé. Bootstrap supprime toutes vos couleurs dans l'aperçu avant impression.

@media print{
  .box-text {

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

Si vous téléchargez Bootstrap sans l'option "Print media styles", vous n'aurez pas ce problème et vous n'aurez pas à supprimer manuellement le code "@media print" dans votre fichier bootstrap.css.

La meilleure solution pour cela si vous utilisez le bootstrap, il suffit donc de supprimer @media print {} tout le code à l'intérieur. et activer les graphiques d'arrière-plan à partir de plus de paramètres tout en prenant un aperçu avant impression.

Je double charge mon fichier source css externe et change le media = "screen" en media = "print" et toutes les bordures de ma table ont été affichées

Essaye ça :

<link rel="stylesheet" media="print" href="bootstrap.css" />

<link rel="stylesheet" media="screen" href="bootstrap.css" />