Как заставить Firefox печатать стиль фонового цвета?

Это настройка браузера. Вы ничего не можете сделать в своем CSS. В Windows - File > Page Setup... > Print Background.

Я нашел решение, оно немного хакерское, но с помощью псевдоэлементов CSS вы можете создавать фоны, используя толстые границы. Рамки печатаются, даже если «печать фона» отключена, просто сделайте их очень толстыми! Одно замечание: Firefox устанавливает для всех белых цветов шрифта черный цвет, поэтому, когда вы создаете фальшивый черный фон, Firefox по-прежнему делает текст черным, делая текст невидимым. Во всяком случае вот:

HTML:

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

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

Вот как я заставил это работать в моем случае, добавив две строки ниже в конкретный div. «@@supports (-moz-appearance:meterbar)» полезен для добавления стилей, специфичных для Firefox.

-webkit-print-color-adjust: точно; настройка цвета: точная;

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

Для отображения цветов фона в Firefox и IE

@media print {
  body{
    -webkit-print-color-adjust: exact; /*chrome & webkit browsers*/
    color-adjust: exact; /*firefox & IE */
  } 
}

Для хрома вы можете использовать это:

-webkit-print-color-adjust:exact;

Или в режиме предварительного просмотра установите флажок Дополнительные настройки->Фоновая графика.

Для Firefox вы не можете включить его с помощью CSS. Вы можете включить его следующим образом (если вы не видите файл, нажмите клавишу Alt один раз).

Файл->Параметры страницы и установите флажок Печать фона (цвет и изображения)

Я взломал это, используя элемент SVG

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

Возможно, это не тот ответ, который вы ищете, но вот:

Я бы предпочел добавить отдельную таблицу стилей для печати страницы. Как правило, вы захотите удалить такие вещи, как меню навигации, хлебные крошки, рекламу и, возможно, внести небольшие изменения в поля, отступы, границы и шрифты по сравнению с таблицей стилей на экране.

Даже мысль о том, чтобы заставить пользователя заполнить всю страницу черными чернилами белым текстом, кажется мне глупой.

Чтобы добавить отдельную таблицу стилей печати, добавьте еще одну таблицу стилей в заголовок страницы.

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