Comment faire pour que Firefox imprime un fond de Style couleur?

Son navigateur. Il n'y a rien que vous puissiez faire dans votre CSS. Dans Windows - File > Page Setup... > Print Background.

j'ai trouvé une solution, c'est un peu hacky, mais avec les pseudo-éléments CSS vous pouvez créer des arrière-plans en utilisant des bordures fat. Les bordures sont imprimées même lorsque "printing background" est éteint, il suffit de les rendre vraiment épais! Une note, Firefox met toutes les couleurs de police blanche au noir, donc quand vous créez un faux fond noir, Firefox rend toujours le texte noir, rendant le texte invisible. De toute façon ici c'est:

The HTML:

<div class="redBox">
  <div class="content">Black on red</div>
</div>

Le css:

.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}

il y a une solution simple pour cela.

background-color, au lieu d'utiliser:

background-color: red

Utilisation:

background-color: unset;
box-shadow: inset 0 0 0 1000px red /* 1000px is a random high 
                                     number that is definitely 
                                     larger than the box dimension*/

color, au lieu de:

color: grey;

Utilisation:

color: unset;
text-shadow: 0 0 grey;

vous pouvez les restreindre à imprimer seulement en utilisant @media print, mais vous n'avez pas à!

C'est ainsi que je l'ai fait fonctionner dans mon cas en ajoutant les deux lignes ci-dessous à la div particulière. "@@supports (- moz-apparence:meterbar)" est utile pour ajouter des styles spécifiques à Firefox.

-webkit-impression de couleur-ajuster: exact; couleur-ajuster: exact;

@@supports (-moz-appearance:meterbar) {
    .container {
        margin: 0;
        font-size: 0.85em;
        width: 100%;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

j'ai piraté ceci en utilisant SVG element

.legendItem {
  position: relative;
}

.legentItemText {
  position: relative;
  z-index: 1;
}

.printBackground {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
}

  <div class="legendItem">
    <div class="legentItemText">Some text.....<div>
  <svg class="printBackground">
    <rect width="100%" height="100%" fill="#000" />
  </svg>
</div>

Peut-être pas la réponse que vous cherchez, mais va ici:

je préférerais ajouter une feuille de style séparée pour imprimer la page. Typiquement, vous voudriez supprimer des choses comme les menus de navigation, les miettes de pain, les annonces, et peut-être faire quelques petits changements dans les marges, les capitonnages, les frontières et les polices par rapport à la feuille de style à l'écran.

même penser à forcer l'utilisateur à remplir une page entière avec de l'encre noire avec du texte blanc me semble stupide.

Pour ajouter un distinct imprimez la feuille de style, ajoutez une autre feuille de style à la tête de votre page.

<link rel="stylesheet" href="print.css" type="text/css" media="print">