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


176

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.


Eh bien, il passe le validateur CSS du W3C ( jigsaw.w3.org/css-validator ). C'est bizarre
GôTô

Cela ne devrait plus être un problème. Je suis arrivé à ce problème parce que j'avais une page bootstrap et bootstrap a une @media printrequête qui supprime les couleurs d'arrière-plan des tables (par exemple des rayures).
Martin Thoma

@MartinThoma Comment avez-vous résolu le problème? Avez-vous supprimé le CSS du modèle boostrap?
EduLopez

Réponses:


242

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.


10
super, vous venez de m'éviter des heures à me creuser la tête sur ce CSS.
Weston Watson

162
Avec Chrome et Safari, vous pouvez ajouter le style css "-webkit-print-color-Adjust: exact;" à l'élément pour forcer l'impression de la couleur et / ou de l'image d'arrière-plan
Marco Bettiolo

11
@MarcoBettiolo ne semble pas fonctionner sur les dernières versions de webkit,! Important fait cependant
Hedde van der Heide

2
L'ajout! Important à la règle l'a résolu pour moi aussi.
Thiago Duarte

14
Pour développer cela, j'ai ajouté le réglage des couleurs: exact; pour que FF fonctionne. Mon code complet est donc*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
BitBug

252

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

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

7
Cela semble avoir résolu mon problème d'impression d'un tableau avec des couleurs de ligne alternatives.
Victor J. Garcia

Assurez-vous d'utiliser le bon boîtier pour le chemin de votre image, car la boîte de dialogue d'impression de Chrome ne charge pas les images du premier essai. Cela se produit uniquement dans le cas où l'URL de votre propriété d'image d'arrière-plan ne correspond pas à la casse du nom du dossier physique. (Rapporté dans la version 48.0.2564.109 m)
MPaul

3
quelle est l'alternative dans Firefox et IE
Shan Khan

5
Une note pour les futurs voyageurs du temps: vous voudrez peut-être utiliser à la color-adjustplace.
Константин Ван

@ КонстантинВан il n'est pas pris en charge dans Chrome depuis avril 2019. Il s'agit de la documentation de Firefox.
Thomas

83

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 ...

5
Vous pouvez ajouter le support IE8 et IE9 avec -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ Si vous voulez que vos images de sprite soient visibles, utilisez la technique img / clip css-tricks.com/css-sprites-with-inline-images , qui vous donnera des images dans IE9 et FF ( pas IE8 cependant)
emik

2
Fonctionne très bien dans les navigateurs normaux, mais pas dans IE, même avec la suggestion de @evami.
woz

@woz Je l'ai fonctionné dans un projet avec IE8 / 9. Le dégradé (tout comme box-shadow) ajoute un élément d'arrière-plan supplémentaire qui n'est pas éliminé par la réinitialisation forcée du navigateur. cela vous dérangerait-il de partager votre css?
emik

2
Cela ne semble pas fonctionner avec le dernier Chrome (60).
swervo

1
Cela échoue pour moi dans Chrome. J'utilise 69. Cela suggère qu'il a été cassé au moins depuis 60 (selon le commentaire de @ swervo).
iconoclaste le

34

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

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

22

-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

aperçu d'impression sur chrome

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

entrez la description de l'image ici

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


C'est peut-être parce que vous avez déjà une feuille de style @print qui réinitialise la couleur d'arrière-plan.
Niccolo M.

OMG! ça marche mais comment ça marche? Pouvez-vous s'il vous plaît expliquer.
rahim.nagori

1
C'est la seule solution qui a fonctionné pour moi jusqu'à présent. <div style = "- webkit-print-color-Adjust: exact! important; background-color: red! important;"> ... </div>
Thomas

10

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

6
! important résout le problème dans tous les navigateurs modernes, tant que "Imprimer les couleurs et les images d'arrière-plan" est activé.
Chris Hynes

2
! important fonctionne également sans intervention de l'utilisateur si vous l'utilisez avec body {-webkit-print-color-adjust: exact; } (selon le commentaire ci-dessus)
yar1

2
J'ai constaté que si j'utilise color-adjustou la variante webkit, je n'ai en fait pas besoin de la règle importante.
Kasapo

7

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;

6

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).


1
c'est un hack fou, mais cela force au moins une certaine forme de couleur d'arrière-plan quels que soient les paramètres d'impression. brillant, merci.
Brad Zacher

6

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>

5

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.


Après des heures de recherche, j'ai trouvé cette réponse. Je suis entré et j'ai éliminé les lignes de Bootstrap.css et WHAM! Couleurs dans le fond imprimable!
Mighty Ferengi

1
Je vous remercie! Enfin, c'est la réponse qui m'a permis de démarrer mais j'avais besoin d'ajouter: body {-webkit-print-color-adjust: exact! Important; }
Ocean Airdrop

3

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 :)


2

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 */

2

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>

1

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.


1

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;
  }
}

0

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


0

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;
    }

}


J'ai adopté votre approche et essayé de le faire fonctionner sur IE11, mais malheureusement cela n'a pas fonctionné. C'était jusqu'à ce que je mette une !importantvaleur sur chaque attribut de ma classe qui l'a ensuite fait fonctionner.
Sal Alturaigi


0
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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.