CSS @media печатает проблемы с background-color; - PullRequest
Новая
       23

CSS @media печатает проблемы с background-color;

159 голосов
/ 09 октября 2010

Я новичок в этой компании, и у нас есть продукт, который использует мили CSS.Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня возникают проблемы с background-color в @media print. 

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Все остальное работает, я могу изменить границы и тому подобное, но background-color не появится в печати.Теперь я понимаю, что вы не сможете ответить на мой вопрос без более подробной информации.Мне было просто любопытно, был ли у кого-то этот вопрос или что-то подобное раньше.

Ответы [ 17 ]

213 голосов
/ 09 февраля 2013

Чтобы включить фоновую печать в Chrome: 

body {
  -webkit-print-color-adjust: exact !important;
}
211 голосов
/ 09 октября 2010

ЕСЛИ у пользователя в настройках печати отключен «Цвет фона и изображения для печати», CSS не будет переопределять это, поэтому всегда учитывайте это. Это настройка по умолчанию .

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

Она найдена в разных местах,В IE9beta он находится в «Печать» -> «Параметры страницы» в разделе «Параметры бумаги»

. В FireFox - в «Параметры страницы» -> вкладка «Формат и параметры» в разделе «Параметры».

74 голосов
/ 03 марта 2013

GOT iT - даже если вопрос был "закрыт" несколько лет назад:)
CSS: box-shadow: врезка 0 0 0 1000px gold;
Работаетдля всех ящиков - включая ячейки таблицы !!!
(Если верить выходному файлу PDF-принтера ..?)
- Проверено только в Chrome + Firefox на Ubuntu...

33 голосов
/ 06 марта 2013

Попробуйте, у меня это работает в Google Chrome: 

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
20 голосов
/ 17 октября 2016

-webkit-print-color-adjust: exact; в одиночку is Not enough Вы должны использовать !important с атрибутом

это предварительный просмотр печати на Chrome после Я добавил !importantкаждому атрибуту background-color и color в каждом теге

printing preview on chrome

, и это предварительный просмотр на Chrome до добавление !important

enter image description here

сейчас, чтобы узнать, как inject !important в стиле div, посмотрите этот ответ Я не могуввести стиль с помощью правила «! Important»

10 голосов
/ 07 июня 2013

Два решения, которые работают (по крайней мере, на современном Chrome - не тестировали дальше):

  1. ! Важное право в обычном объявлении CSS работает (даже в @media print)
  2. Используйте SVG
7 голосов
/ 19 апреля 2015

Если вы хотите создать «дружественные для печати» страницы, я рекомендую добавить «! Important» в ваш CSS @media print. Это побуждает большинство браузеров печатать фоновые изображения, цвета и т. Д.

Примеры: 

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
5 голосов
/ 07 января 2015

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

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

Активируйте его, добавив класс к вашему элементу: 

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

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

Обратите внимание, что этот хак не будет работать с элементами, отличными от display: block; или display: table-cell;, поэтому, например, <table class="your-background"> и <tr class="your-background"> не будут работать.

Мы используем это, чтобы получить фоновые цвета во всех браузерах (по-прежнему требуется IE9 +).

5 голосов
/ 21 августа 2016

Для хрома я использовал что-то подобное, и это сработало для меня.

В теге body, 

<body style="-webkit-print-color-adjust: exact;"> </body>

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
4 голосов
/ 28 апреля 2018

Несмотря на то, что использование !important обычно не одобряется, этот код нарушает bootstrap.css, который не позволяет печатать строки таблицы с background-color. 

.table td,
.table th {
    background-color: #fff !important;
}

Предположим, вы пытаетесь стилизоватьследующий HTML: 

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Чтобы переопределить этот CSS, поместите следующее (более конкретное) правило в вашу таблицу стилей: 

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

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

Страница:
...