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

Question

У меня есть несколько простых CSS:

#someElement {
    background-color:black;
    color:white;
}

В браузере все выглядит нормально, но когда я печатаю его в Firefox, он выглядит как черный текст на белом фоне. Я предполагаю, что это какая-то функция экономии чернил, но есть ли способ обойти это?

Answer 1

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

Answer 2

Я нашел решение, оно немного хакерское, но с помощью псевдоэлементов 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;
  }
}

Answer 3

Для этого есть простое решение.

Для background-color вместо использования:

background-color: red

Использование:

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 вместо:

color: grey;

Использование:

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

<Ч />

Вы можете ограничить их печать только с помощью @media print, но это не обязательно!

<час /> Примечание: Иногда вам следует использовать background-color: transparent; или color: transparent;, если color или background-color наследуются от родительских элементов.

Answer 4

Вот как я сделал это, чтобы работать в моем случае, добавив две строки ниже к конкретному div. «@@ support (-moz -arance: 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;
    }
}

Answer 5

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

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

Answer 6

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

-webkit-print-color-adjust:exact;

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

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

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

Answer 7

Я взломал это с помощью элемента 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>

Answer 8

Может быть, не тот ответ, который вы ищете, но здесь говорится:

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

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

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

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