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

Я новичок в этой компании, и у нас есть продукт, который использует много сотен 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 не будет отображаться при печати. Теперь я понимаю, что, возможно, вы не сможете ответить на мой вопрос без более подробной информации. Мне просто было любопытно, была ли у кого-нибудь эта проблема или что-то подобное раньше.


css media-queries
person Weston Watson    schedule 08.10.2010    source источник
comment
Что ж, он проходит CSS-валидатор W3C (jigsaw.w3.org/css-validator ). Это странно   -  person GôTô    schedule 09.10.2010
comment
Это больше не должно быть проблемой. Я пришел к этой проблеме, потому что у меня была страница начальной загрузки, а в начальной загрузке есть запрос @media print, который удаляет цвета фона из таблиц (например, полосы).   -  person Martin Thoma    schedule 22.09.2017
comment
@MartinThoma Как вы решили проблему? Вы удалили CSS из шаблона ускорения?   -  person EduLopez    schedule 05.01.2018

Ответы (22)


arrow_upward
262
arrow_downward

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

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

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

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

person Ryan Ternier    schedule 08.10.2010
comment
отлично, вы только что сэкономили мне часы, ломающие голову над этим CSS. - person Weston Watson; 09.10.2010
comment
В Chrome и Safari вы можете добавить стиль css -webkit-print-color-adjust :ight; к элементу, чтобы принудительно распечатать цвет фона и / или изображение - person Marco Bettiolo; 02.07.2012
comment
@MarcoBettiolo - Вы, сэр, герой. Большое спасибо - person netpoetica; 30.12.2012
comment
@MarcoBettiolo, похоже, не работает с последними сборками webkit, однако! Important работает - person Hedde van der Heide; 14.05.2015
comment
Добавление! Important в правило решило эту проблему и для меня. - person Thiago Duarte; 25.05.2015
comment
где это оседает в хроме? - person Muneem Habib; 25.06.2015
comment
Никакого эффекта для меня в FF или IE. Это было решением для меня. - person dudeNumber4; 13.07.2015
comment
Также не работает, по крайней мере, должным образом в браузере Chrome. Пожалуйста, посмотрите здесь. stackoverflow.com/questions/34428821/ - person Stu; 23.12.2015
comment
@MarcoBettiolo Mozilla пометила это свойство как нестандартное, поэтому результаты у него противоречивые developer.mozilla.org/en-US/docs/Web/CSS/ - person Mike Young; 18.02.2016
comment
Чтобы расширить это, я добавил настройку цвета: точный; чтобы FF работал. Итак, мой полный код *{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; } - person BitBug; 19.08.2017
comment
Не устанавливайте цвет фона в таблице стилей печати. Просто так в обычном CSS, и все будет нормально. `` ‹Div style = background-color: blue;› Контент с фоном ‹/div› `` - person Dryden Williams; 30.07.2019
comment
Является ли совет, содержащийся в этом ответе, по-прежнему актуальным в 2019 году? Может быть, мы сможем получить обновление. - person mrClean; 16.08.2019

arrow_upward
290
arrow_downward

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

body {
  -webkit-print-color-adjust: exact !important;
}
person drolex    schedule 09.02.2013
comment
Кажется, это решило мою проблему с печатью таблицы с альтернативными цветами строк. - person Victor J. Garcia; 14.10.2013
comment
Убедитесь, что вы используете правильный регистр для пути к изображению, поскольку диалоговое окно печати Chrome не загружает изображения с первой попытки. Это происходит только в том случае, если URL-адрес вашего свойства background-image не соответствует регистру имени физической папки. (Сообщается в версии 48.0.2564.109 m) - person MPaul; 10.02.2016
comment
какая альтернатива в Firefox и IE - person Shan Khan; 25.02.2016
comment
Примечание для будущих путешественников во времени: вы можете использовать color-adjust < / a> вместо этого. - person Константин Ван; 08.12.2018
comment
@ КонстантинВан он не поддерживается в Chrome по состоянию на апрель 2019 года. Это документация по firefox. - person Thomas; 17.04.2019
comment
Боже, это круто! - person Donskikh Andrei; 19.05.2021

arrow_upward
93
arrow_downward

Понятно:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Работает для всех ящиков - включая ячейки таблицы !!!

  • (Если верить выходному файлу PDF-принтера ..?)
  • Проверено только в Chrome + Firefox на Ubuntu ...
person T4NK3R    schedule 03.03.2013
comment
Вы можете добавить поддержку IE8 и IE9 с -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */. Если вы хотите, чтобы ваши изображения спрайтов были видны, используйте технику img / clip css-tricks.com/css-sprites-with-inline-images, который предоставит вам изображения в IE9 и FF (но не в IE8) - person emik; 23.09.2013
comment
Отлично работает в обычных браузерах, но не в IE, даже с предложением @evami. - person woz; 01.10.2013
comment
@woz У меня он работает в проекте с IE8 / 9. Градиент (как и box-shadow) добавляет дополнительный элемент фона, который не удаляется принудительным сбросом браузера. не могли бы вы поделиться своим css? - person emik; 02.10.2013
comment
Я скопировал ваш CSS, но использую IE10. Может в этом разница? - person woz; 02.10.2013
comment
10000px более безопасен. - person Felipe; 25.04.2014
comment
Похоже, это не работает с последней версией Chrome (60). - person swervo; 24.08.2017
comment
У меня это не работает в Chrome. Я использую 69. Это говорит о том, что он был сломан как минимум с 60 (согласно комментарию @ swervo). - person iconoclast; 19.09.2018

arrow_upward
36
arrow_downward

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

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
person MAXE    schedule 06.03.2013

arrow_upward
23
arrow_downward

-webkit-print-color-adjust: exact; самостоятельно is Not enough необходимо использовать !important с атрибутом

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

предварительный просмотр печати на Chrome

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

введите описание изображения здесь

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

person Basheer AL-MOMANI    schedule 17.10.2016
comment
Возможно, это потому, что у вас уже есть таблица стилей @print, которая сбрасывает цвет фона. - person Niccolo M.; 02.03.2019
comment
МОЙ БОГ! он работает, но как это работает? Не могли бы вы объяснить. - person rahim.nagori; 19.03.2019
comment
Это единственное решение, которое пока работало для меня. ‹Стиль div = -webkit-print-color-adjust: exact! Important; background-color: red! Important;› ... ‹/div› - person Thomas; 17.04.2019
comment
Спасибо, приятель. У меня сработало. Большое спасибо. - person Sunny mori; 03.05.2021

arrow_upward
11
arrow_downward

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

  1. Право! important в обычном объявлении css работает (даже не в @media print)
  2. Используйте svg
person yar1    schedule 07.06.2013
comment
! important решает проблему в любом современном браузере, если включена функция «Печать цветов фона и изображений». - person Chris Hynes; 25.06.2013
comment
! important также работает без вмешательства пользователя, если вы используете его вместе с body {-webkit-print-color-adjust :ight; } (согласно комментарию выше) - person yar1; 08.07.2013
comment
Я обнаружил, что если я использую color-adjust или вариант webkit, мне на самом деле не нужно важное правило. - person Kasapo; 27.01.2017

arrow_upward
7
arrow_downward

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

ПРИМЕРЫ:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
person nuts-n-beer    schedule 19.04.2015

arrow_upward
6
arrow_downward

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

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

person kernel    schedule 07.01.2015
comment
это безумный хакер, но он, по крайней мере, заставляет использовать какой-то фоновый цвет независимо от настроек печати. молодец, спасибо. - person Brad Zacher; 09.12.2015

arrow_upward
6
arrow_downward

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

В теге body

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

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
person Aamir Shaikh    schedule 21.08.2016

arrow_upward
6
arrow_downward

Несмотря на то, что использование !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;
    }
}

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

person The Aelfinn    schedule 28.04.2018
comment
После нескольких часов поисков я нашел этот ответ. Я вошел и удалил строки из Bootstrap.css и WHAM! Цвета в печатном фоне! - person Mighty Ferengi; 13.06.2018
comment
Спасибо! Наконец, это ответ, который заставил меня работать, но мне нужно было добавить: body {-webkit-print-color-adjust :ight! Important; } - person Ocean Airdrop; 02.02.2019

arrow_upward
3
arrow_downward

Обнаружил эту проблему, потому что у меня была аналогичная проблема при попытке сгенерировать PDF-файл из html-вывода в Google Apps Script, где фоновые цвета также не «печатаются».

Решения -webkit-print-color-adjust:exact; и !important конечно не сработали, но box-shadow: inset 0 0 0 1000px gold; сработали ... отличный хак, большое вам спасибо :)

person John    schedule 13.04.2016

arrow_upward
2
arrow_downward

Думал, что добавлю недавнюю и актуальную помощь 2015 года из недавнего опыта печати css.

Была возможность печатать фон и цвета независимо от настроек диалогового окна печати.

Для этого мне пришлось использовать комбинацию ! Important и -webkit-print-color-adjust: exact! Important для правильной печати фона и цветов.

Кроме того, при объявлении цветов я обнаружил, что наиболее устойчивые области нуждаются в определении непосредственно для вашей цели. Например:

<div class="foo">
 <p class="red">Some text</p>
</div>

И ваш CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
person Jonathan    schedule 30.09.2015

arrow_upward
2
arrow_downward

Протестировано и работает в Chrome, Firefox, Opera и Edge к 2016/10 г. Должен работать в любом браузере и всегда должен выглядеть так, как ожидалось.

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

Вот полная печатаемая HTML-страница для начальной загрузки:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>
person Heroselohim    schedule 15.10.2016

arrow_upward
1
arrow_downward

Лучшее «решение», которое я нашел, - это предоставить заметную кнопку или ссылку «Печать», которая открывает небольшое диалоговое окно, в котором смело, кратко и лаконично объясняется, что им необходимо отрегулировать настройки принтера (с помощью инструкции ABC 123), чтобы включить фон и печать изображений. Для меня это было очень удачно.

person alano    schedule 31.07.2012

arrow_upward
1
arrow_downward

В некоторых случаях (блоки без содержимого, но с фоном) его можно переопределить с помощью границ, индивидуально для каждого блока.

Например:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
person Gedeon    schedule 27.03.2013

arrow_upward
1
arrow_downward

Для Chrome :::::::::::::::::

Ctrl + P = ›Выберите" Нажмите "Дополнительные настройки" = ›В меню" Параметры "выберите параметры фона и графики.

                      :) Will Work

** Почему не работает! Причина: ** В браузере Chrome включены шрифты и заголовки.

Общий случай :::::

Когда вам не нужно включать эту опцию вручную. В теле в CSS введите :::::

-webkit-print-color-adjust: точно! важно;

:)Работает

person Abir Paul    schedule 11.01.2021

arrow_upward
0
arrow_downward

Вы можете использовать тег canvas и «рисовать» фон, которые работают в IE9, Gecko и Webkit.

person Community    schedule 14.10.2014

arrow_upward
0
arrow_downward

Если вы не против использовать изображение вместо цвета фона (или, возможно, изображение с вашим цветом фона), приведенное ниже решение сработало для меня в FireFox, Chrome и даже IE без каких-либо переопределений. Установите изображение где-нибудь на странице и скройте его, пока пользователь не распечатает.

HTML на странице с фоновым изображением

<img src="someImage.png" class="background-print-img">

CSS

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

person ksealey    schedule 10.02.2015
comment
Я воспользовался вашим подходом и попытался заставить его работать в IE11, но, к сожалению, это не сработало. Так было до тех пор, пока я не установил значение !important для каждого атрибута в моем классе, что затем заставило его работать. - person Sal Alturaigi; 25.12.2017

arrow_upward
0
arrow_downward

Не устанавливайте background-color внутри таблицы стилей печати. Просто установите атрибут в обычном файле css, и он отлично работает :)

Ознакомьтесь с этим примером: HTML-шаблон Ultimate Print с верхним и нижним колонтитулами

Демо: Окончательный шаблон HTML для печати с демонстрацией верхнего и нижнего колонтитула

person Dryden Williams    schedule 30.07.2019

arrow_upward
0
arrow_downward 

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Работает в Chrome и Edge

person Vasily Ivanov    schedule 30.06.2020

arrow_upward
0
arrow_downward 

    body{
        background-color: #E5FFE5;
    }
    .bg_print{
       border-bottom: 30px solid #FFCC33;
    }
    .orange_bg_print_content{
        margin-top: -25px;
        padding: 0 10px;
    }
    <div class="bg_print">
    </div>
    <div class="orange_bg_print_content">
        My Content With Background!
    </div>

Протестировано и работает в Chrome, Firefox и Edge ...

person Jafari Ebrahim    schedule 23.02.2021

arrow_upward
0
arrow_downward

Я только что добавил в запрос к печатным СМИ этот фрагмент, и все стили были применены как задумано:

       * {
        color-adjust: exact!important;  
        -webkit-print-color-adjust: exact!important; 
         print-color-adjust: exact!important;
      }
person vnapastiuk    schedule 16.06.2021