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

У меня есть простой CSS:

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

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

Ответ 1

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

Ответ 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;
  }
}

Ответ 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 наследуются от родительских элементов.

Ответ 4

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

-webkit-print-color-adjust: точно; color-adjust: exact;

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

-webkit-print-color-adjust:exact;

Или в предварительном просмотре печати, установите флажок Подробнее settings-> Фоновая графика

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

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

Ответ 8

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

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

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

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

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