web-dev-qa-db-fra.com

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é à un tableau une couleur d'arrière-plan . 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 toujours sa ne montre 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>[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>
cssgoogle-chromecss3printingwebkit
183
user2045025

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

Cependant, s’assurer que vous avez le bon CSS pour l’impression peut souvent être délicat. Plusieurs mesures peuvent être prises pour éviter les difficultés que vous rencontrez. Commencez par séparer tous vos CSS d'impression de votre écran CSS. Cela se fait via les @media print et @media screen.

Souvent, il ne suffit pas de configurer du code CSS @media print supplémentaire, car tous vos autres CSS sont également 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 l'emportent pas automatiquement sur les règles CSS non imprimées.

Dans votre cas, le -webkit-print-color-adjust: exact fonctionne. Cependant, vos définitions de background-color et de couleur sont dépassées par d'autres CSS ayant une spécificité supérieure.

Bien que je ne pas approuve l'utilisation de !important dans 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 l'aperçu avant impression).

351
purgatory101

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 le voir en BW et en couleur (Couleur: Options- Couleur ou Noir et blanc). Si vous n'avez pas cette option, alors je suggère de saisir cette extension Chrome et vous simplifier la vie:

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

Le site que vous avez ajouté sur fiddle en a besoin dans votre css media print (il ne vous reste plus qu'à l'ajouter ... 

media print CSS dans le corps:

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

UPDATE OK, votre problème est donc bootstrap.css ... il a un css d'impression ainsi que vous .... vous le supprimez et cela devrait vous donner de la couleur .... vous besoin de faire votre propre ou coller avec bootstraps print css.

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

61
Riskbreaker

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

background-color: #f5f5f5 !important;

25
Flea

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

Cela n'a rien à voir avec css, @media ou spécificité. Vous pouvez probablement vous y retrouver, mais le moyen le plus simple d’obtenir que chrome affiche la couleur de fond et d’autres graphiques est de cocher correctement cette case sous Plus de paramètres.

 enter image description here

24
Travis J

Si vous utilisez bootstrap ou tout autre CSS tiers, assurez-vous de spécifier l'écran du média uniquement, de sorte que vous ayez le contrôle du type de média d'impression dans vos propres fichiers CSS:

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

9
Vyacheslav Cotruta

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

J'ai essayé toutes les solutions et elles ne fonctionnaient pas ... jusqu'à ce que j'ai découvert que bootstrap.css avait un @media print super ennuyeux qui 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, soit supprimer cette section de bootstrap.css (ou bootstrap.min.css)

Ou remplacez ces valeurs dans le css de la page que vous souhaitez imprimer dans votre propre @media print

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

Utilisez les éléments suivants dans votre feuille de style @media print.

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 points à noter:

  • la couleur de fond est la solution de rechange absolue et est surtout là pour la postérité.
  • background-image utilise un pixel de 1px x 1px de # 404040 transformé en un PNG. Si l'utilisateur a activé les images, cela peut fonctionner, sinon ...
  • Définissez la boîte-ombre, si cela ne fonctionne pas ...
  • Bordure = 1/2 votre hauteur et/ou largeur désirée, couleur unie. Dans l'exemple ci-dessus, je voulais une boîte de 60 pixels de hauteur.
  • Réduisez la hauteur/largeur en fonction de ce que vous contrôlez dans l'attribut border.
  • La couleur de la police sera noire par défaut sauf si vous utilisez! Important
  • Définissez line-height sur 0 pour que la boîte n’ait pas de dimension physique. 
  • Créez et hébergez vos propres PNG :-)
  • Si le texte du bloc doit être renvoyé à la ligne, placez-le dans un div et positionnez-le à l'aide de position: relative; et supprimez line-height.

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

6
Pete Fecteau

Votre CSS doit être comme ça:

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

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

Êtes-vous sûr qu'il s'agit d'un problème de CSS? Quelques articles sur Google autour de ce problème: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

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

5
Bertrand

J'ai utilisé la réponse de purgatory101 mais j'ai eu du mal à conserver toutes les couleurs (icônes, arrière-plans, couleurs du texte, etc.), surtout que les feuilles de style CSS ne peuvent pas être utilisées avec des bibliothèques qui modifient de manière dynamique les couleurs des éléments DOM. Par conséquent, voici un script qui modifie les styles de l'élément (background-colour et 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 feuille de style @media print car cela fonctionne quelle que soit la structure de la page.

Une partie du script est spécialement conçue pour conserver la couleur des icônes FontAwesome (ou tout élément utilisant un sélecteur :before pour insérer du contenu coloré).

JSFiddle montrant le script en action

Compatibilité: fonctionne sous Chrome, je n'ai pas testé les 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();
}

Puis modifiez la fonction window.print pour lui permettre de définir les styles avant de les imprimer et de 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 les chemins des icônes pour créer CSS: avant elements est une copie de this SO answer

2
hilnius

Vous pouvez également utiliser la propriété box-shadow.

1
Shreyan Bhowmick

Il existe un style dans les fichiers css bootstrap sous @media print {* ,: after,: before ....} qui comporte des styles de couleur et d'arrière-plan intitulés! Important, qui suppriment les couleurs d'arrière-plan des éléments. Tuez ces deux css et ça marchera.

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

1
Taugenichts

Pour IE

Si vous utilisez IE puis accédez à l'aperçu avant impression (clic droit sur le document -> aperçu avant impression), accédez à paramètres et sélectionnez l'option "Imprimer la couleur d'arrière-plan et les images", sélectionnez cette option et essayez.

 enter image description here 

0
PADMAJA SONWANE

La meilleure solution pour cela si vous utilisez bootstrap, faites donc une chose: supprimez @media print {} tout le code qu'il contient. et activez les graphiques d’arrière-plan à partir de plusieurs paramètres tout en prenant un aperçu avant impression.

0
Mohd. Shaizad

Si vous téléchargez Bootstrap sans l'option "Imprimer les styles de média", vous ne rencontrerez pas ce problème et vous ne devrez pas supprimer le code "@media print" manuellement dans votre fichier bootstrap.css.

0
user2430846

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;
  }
}
0
Optimaz ID