Problèmes d'impression CSS @media avec couleur d'arrière-plan;

Question

Je suis nouvelle ici, à cette entreprise, et nous avons un produit qui utilise des kilomètres de css. Je suis d'essayer de faire une version imprimable de la feuille de style pour notre application, mais je vais avoir des problèmes avec la couleur d'arrière-plan dans les @media print...

@media print {
#header{display:none;}
#adwrapper{display:none;}
td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}}

tout le reste fonctionne, je peux modifier les frontières et que telle, mais couleur d'arrière-plan ne viendra pas par le biais de l'imprimé. Maintenant, je comprends que y ' all pourrait ne pas être en mesure de répondre à ma question avec plus de détails, j'étais juste curieux de savoir si quelqu'un avait ce problème, ou quelque chose de semblable avant.

Answer 1

Pour activer l'impression en arrière-plan dans Chrome:

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

Answer 2

SI un utilisateur a "Imprimer les couleurs et les images d'arrière-plan" désactivés dans ses paramètres d'impression, aucun CSS ne le remplacera, aussi tenez-en compte. Ceci est un paramètre par défaut .

Une fois que cela est défini, il imprimera les couleurs et les images d'arrière-plan, ce que vous avez là fonctionnera.

On le trouve à différents endroits. Dans IE9beta, il se trouve dans Imprimer-> Options de la page sous Options du papier

Dans FireFox, il se trouve dans Mise en page -> Onglet [Format & Options] sous Options.

Answer 3

GOT iT - même si la question était "fermée" il y a des années:)
CSS: box-shadow: encart 0 0 0 1000px gold;
Fonctionne pour toutes les boîtes - y compris les cellules de table !!!
(S'il faut croire le fichier de sortie de l'imprimante PDF??)
- Testé uniquement dans Chrome + Firefox sur Ubuntu ...

Answer 4

Essayez ceci, cela a fonctionné pour moi sur Google Chrome:

 <style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
 

Answer 5

Deux solutions qui fonctionnent (sur Chrome moderne au moins - n'ont pas été testées au-delà):

1. ! important à droite dans la déclaration css ordinaire fonctionne (même pas dans le @media print)
2. Utilisez svg