CSS @media печатает проблемы с фоновым цветом;

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

Ответы

Ответ 1

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

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

Он встречается в разных местах. В IE9beta он находится в параметрах Print- > page Options в разделе Paper options

В FireFox он находится в разделе "Параметры страницы" → [Формат и параметры] в разделе "Параметры".

Ответ 2

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

body {
  -webkit-print-color-adjust: exact !important;
}

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

! Важное право в обычной декларации css работает (даже в печати @media)
Использовать svg

Ответ 7

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

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

Ответ 8

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

ПРИМЕРЫ:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

Ответ 9

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

В теге body

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

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Ответ 10

Несмотря на неодобрительное использование !important использования, этот код bootstrap.css код в 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;
    }
}

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

Ответ 11

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

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

Ответ 12

Думал, что я добавлю недавнюю и соответствующую 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 */

Ответ 13

Протестировано и работает по сравнению с 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>

Ответ 14

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

Ответ 15

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

Например:

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

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

Ответ 16

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

Ответ 17

Если вы не против использования изображения вместо цвета фона (или, возможно, изображения с цветом фона), то приведенное ниже решение сработало для меня в 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;
    }

}

Ответ 18

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

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

Демонстрация: HTML-шаблон Ultimate Print с заголовком и Footer Demo