web-dev-qa-db-fra.com

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

Je suis nouveau ici dans cette société 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 je rencontre des problèmes de couleur d'arrière-plan dans @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, mais la couleur de fond ne sera pas visible lors de l'impression. Maintenant, je comprends que vous ne pourrez peut-être pas tous répondre à ma question avec plus de détails. J'étais juste curieux de savoir si quelqu'un avait déjà eu ce problème, ou quelque chose de similaire. 

cssmedia-queries
145
Weston Watson

SI un utilisateur a "Imprimer les couleurs et les images d'arrière-plan" désactivée dans ses paramètres d'impression, aucun CSS ne la 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.

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

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

197
Ryan Ternier

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

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

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 cases - y compris les cellules de table !!!
(S'il faut croire le fichier de sortie de l’imprimante PDF??)
- Seulement testé dans Chrome + Firefox sur Ubuntu ...

70
T4NK3R

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

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

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

ceci affiche un aperçu sur chrome après j'ai ajouté !important à chaque background-color et color attrubute dans chaque balise

 printing preview on chrome

et ceci affiche un aperçu sur chrome avant en ajoutant !important 

 enter image description here

maintenant, pour savoir comment inject!important au style de div, consultez cette réponse Je ne parviens pas à injecter un style avec une règle «! important»

15
Basheer AL-MOMANI

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
9
yar1

Si vous souhaitez créer des pages "imprimables", nous vous recommandons 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;
7
nuts-n-beer

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

Dans la balise body,

<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>
5
Aamir Shaikh

Vous pouvez faire un autre tour sans activer l’option de bordure d’impression mentionnée dans d’autres publications. Puisque les frontières sont imprimées, vous pouvez simuler des couleurs de fond unies 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 peu plus de code et un peu plus de soin pour rendre les couleurs de fond visibles, c'est la seule solution que je connaisse.

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

Nous l'utilisons pour obtenir des couleurs de fond dans tous les navigateurs (encore, IE9 + requis).

5
kernel

Bien que l'utilisation de !important soit généralement mal vue, il s'agit du code incriminé dans bootstrap.css qui empêche l'impression des lignes du tableau avec background-color.

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

Supposons que vous essayez de styler le code 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 d'amorçage.

4
The Aelfinn

J'ai trouvé ce problème, car j'avais un problème similaire lors de la tentative de génération d'un PDF à partir d'une sortie HTML dans le script Google Apps, où les couleurs d'arrière-plan ne sont pas non plus "imprimées". 

Les solutions -webkit-print-color-adjust:exact; et !important n'ont bien sûr pas fonctionné, mais le box-shadow: inset 0 0 0 1000px gold; a été ... génial, merci beaucoup :)

2
John

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

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

Pour ce faire, je devais utiliser une combinaison de! Important&-webkit-print-color-adjust: exact! Importantpour obtenir un fond et des couleurs à imprimer correctement . 

De plus, lors de la déclaration des couleurs, j'ai trouvé que les zones les plus rebelles avaient besoin d'une définition directement à 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 */
2
Jonathan

La meilleure "solution" que j'ai trouvée consiste à fournir un bouton ou un lien "Imprimer" bien visible qui ouvre une petite boîte de dialogue expliquant avec audace, brièveté et concision la nécessité d'ajuster les paramètres de l'imprimante (avec une instruction ABC 123) pour activer l'arrière-plan et impression d'image. Cela a été très réussi pour moi.

1
alano

Dans certains cas (blocs sans contenu, mais avec arrière-plan), il peut être remplacé par 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;
  }
}
1
Gedeon

Testé et fonctionnel sur Chrome, Firefox, Opera et Edge d’ici 2016/10. Devrait fonctionner sur n'importe quel navigateur et devrait toujours ressembler à ce qui était attendu.

D'accord, j'ai effectué une petite expérience multi-navigateurs pour l'impression des couleurs d'arrière-plan. Il suffit de copier, coller et profiter!

Voici une page HTML imprimable complète pour 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>
1
Heroselohim

Vous pouvez utiliser les balises canvas et "dessiner" l'arrière-plan, qui fonctionnent sur IE9, Gecko et Webkit.

0
Thomas Lecavelier

Ne pas définissez le background-color à l'intérieur de la feuille de style d'impression. Il suffit de définir l’attribut dans le fichier css normal et cela fonctionne très bien :)

Commander 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 la démo en-tête et pied de page

0
Dryden Williams

Si vous utilisez une image au lieu d’une couleur d’arrière-plan (ou éventuellement d’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 aucune substitution. 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;
    }

}

0
ksealey