Problèmes d'impression CSS @media avec background-color;

Je suis nouveau ici dans cette entreprise et nous avons un produit qui utilise des kilomètres de CSS. J'essaie de créer une feuille de style imprimable pour notre application, mais j'ai des problèmes avec background-colorin @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 bordures et autres mais background-colorje ne passerai pas par l'impression. Maintenant, je comprends que vous ne pourrez peut-être pas répondre à ma question sans plus de détails. J'étais juste curieux de savoir si quelqu'un avait ce problème, ou quelque chose de similaire, avant.

SI un utilisateur a désactivé l'option "Imprimer les couleurs et les images d'arrière-plan" dans ses paramètres d'impression, aucun CSS ne remplacera cela, alors tenez toujours compte de cela. Ceci est un paramètre par défaut .

Une fois que cela est défini pour imprimer 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 page sous Options de papier

Dans FireFox, c'est dans Mise en page -> Onglet [Format & Options] sous Options.

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

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

Je l'ai:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Fonctionne pour toutes les boîtes - y compris les cellules de tableau !!!

• (Si l'on en croit le fichier de sortie de l'imprimante PDF ..?)
• Uniquement testé dans Chrome + Firefox sur Ubuntu ...

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

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

-webkit-print-color-adjust: exact; seul,is Not enough vous devez utiliser !importantavec l'attribut

c'est un aperçu d'impression sur chrome après avoir ajouté !importantà chacun background-coloret colorattrubute dans chaque tag

et ceci est un aperçu d'impression sur chrome avant d' ajouter!important

maintenant, pour savoir comment inject !importantdiviser le style, lisez cette réponse Je ne parviens pas à injecter un style avec une règle "! important"

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

1. ! important droit dans la déclaration css régulière fonctionne (même pas dans l'impression @media)
2. Utiliser svg

Si vous cherchez à créer des pages "imprimables", je vous recommande d'ajouter "! Important" à votre CSS d'impression @media. Cela encourage la plupart des navigateurs à imprimer vos images d'arrière-plan, vos couleurs, etc.

EXEMPLES:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

Il existe une autre astuce que vous pouvez faire sans activer l'option de bordure d'impression mentionnée dans d'autres articles. Puisque les bordures sont imprimées, vous pouvez simuler des couleurs d'arrière-plan solides avec ce hack:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Activez-le en ajoutant la classe à votre élément:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Bien que cela nécessite un code supplémentaire et une attention particulière pour rendre les couleurs d'arrière-plan visibles, c'est pourtant la seule solution que je connaisse.

Notez que ce hack ne fonctionnera pas sur des éléments autres que display: block; ou display: table-cell;, donc par exemple <table class="your-background">et<tr class="your-background"> ne fonctionnera pas.

Nous utilisons cela pour obtenir des couleurs d'arrière-plan dans tous les navigateurs (toujours, IE9 + requis).

Pour le chrome, j'ai utilisé quelque chose comme ça et ça a marché pour moi.

Dans l'étiquette corporelle,

<body style="-webkit-print-color-adjust: exact;"> </body>

Ou pour un élément particulier, disons si vous avez un tableau et que vous voulez remplir un td c'est à dire une cellule,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Bien que l' !importantutilisation soit généralement désapprouvée, il s'agit du code offensant bootstrap.cssqui empêche l'impression des lignes de tableau background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Supposons que vous essayez de styliser le HTML suivant:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Pour remplacer ce CSS, placez la règle suivante (plus spécifique) dans votre feuille de style:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Cela fonctionne car la règle est plus spécifique que la valeur par défaut du bootstrap.

J'ai trouvé ce problème, car j'ai eu un problème similaire en essayant de générer un PDF à partir d'une sortie html dans Google Apps Script où les couleurs d'arrière-plan ne sont pas non plus "imprimées".

Les solutions -webkit-print-color-adjust:exact;et !importantbien sûr n'ont pas fonctionné, mais elles ont box-shadow: inset 0 0 0 1000px gold;fait ... super hack, merci beaucoup :)

Je pensais que j'ajouterais une aide récente et pertinente de 2015 à partir d'une expérience css d'impression récente.

Était capable d'imprimer des arrière-plans et des couleurs indépendamment des paramètres de la boîte de dialogue d'impression.

Pour ce faire, j'ai dû utiliser une combinaison de ! Important & -webkit-print-color-Adjust: exact! Important pour que l'arrière-plan et les couleurs s'impriment correctement.

De plus, lors de la déclaration des couleurs, j'ai trouvé que les zones les plus tenaces avaient besoin d'une définition directement pour votre cible. Par exemple:

<div class="foo">
 <p class="red">Some text</p>
</div>

Et votre CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

Testé et fonctionnel sur Chrome, Firefox, Opera et Edge d'ici 2016/10. Devrait fonctionner sur n'importe quel navigateur et devrait toujours avoir l'air comme prévu.

Ok, j'ai fait une petite expérience multi-navigateurs pour imprimer les couleurs d'arrière-plan. Copiez, collez et profitez-en!

Voici une page HTML imprimable complète pour le bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

La meilleure «solution» que j'ai trouvée est de fournir un bouton ou un lien «Imprimer» bien en vue qui ouvre une petite boîte de dialogue expliquant de manière audacieuse, succincte et concise la nécessité d'ajuster les paramètres de l'imprimante (avec une instruction à puce ABC 123) pour activer l'arrière-plan et l'impression d'images. Cela a été très réussi pour moi.

Dans certains cas (blocs sans contenu, mais avec arrière-plan), il peut être remplacé en utilisant des bordures, individuellement pour chaque bloc.

Par exemple:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

Vous pouvez utiliser la balise canvaset "dessiner" l'arrière-plan, qui fonctionnent sur IE9, Gecko et Webkit.

Si cela ne vous dérange pas d'utiliser une image au lieu d'une couleur d'arrière-plan (ou éventuellement une image avec votre couleur d'arrière-plan), la solution ci-dessous a fonctionné pour moi dans FireFox, Chrome et même IE sans aucun dépassement. Placez l'image quelque part sur la page et masquez-la jusqu'à ce que l'utilisateur imprime.

Le html sur la page avec l'image de fond

<img src="someImage.png" class="background-print-img">

Le Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

Ne définissez pas l' background-colorintérieur de la feuille de style d'impression. Définissez simplement l'attribut dans le fichier css normal et cela fonctionne bien :)

Consultez cet exemple: Le modèle HTML d'impression ultime avec en-tête et pied de page

Démo: le modèle HTML d'impression ultime avec démo d'en-tête et de pied de page

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Fonctionne dans Chrome et Edge