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

176

Я новичок в этой компании, и у нас есть продукт, который использует мили CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-colorin @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 
— Уэстон Уотсон
источник
Что ж, он проходит CSS-валидатор W3C ( jigsaw.w3.org/css-validator ). Это странно
— GôTô
Это не должно быть проблемой больше. Я пришел к этой проблеме, потому что у меня была страница начальной загрузки, а у начальной загрузки есть @media printзапрос, который удаляет фоновые цвета из таблиц (например, полос).
— Мартин Тома,
@MartinThoma Как вы решили проблему? Вы удалили CSS из шаблонной надстройки?
— EduLopez

Ответы:

242

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

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

Встречается в разных местах. В IE9beta это находится в Print-> Параметры страницы в разделе Параметры бумаги

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

— Райан Тернье
источник
10
отлично, вы только что сэкономили мне много времени на размышлениях над этим CSS.
— Уэстон Уотсон
162
С Chrome и Safari вы можете добавить стиль css "-webkit-print-color-Adjust: точный;" к элементу для принудительной печати цвета фона и / или изображения
— Марко Беттиоло
11
@MarcoBettiolo, похоже, не работает с последними сборками webkit, однако важно!
— Хедде ван дер Хайде
2
Добавление! Важно, чтобы правило решило это и для меня.
— Тьяго Дуарте
14
Чтобы расширить это, я добавил корректировку цвета: точный; для FF работать. Итак, мой полный код*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug
253

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

body {
  -webkit-print-color-adjust: exact !important;
}
— drolex
источник
7
Это, кажется, решило мою проблему с печатью таблицы с альтернативными цветами строки.
— Виктор Дж. Гарсия
Убедитесь, что вы используете правильный путь к пути изображения, поскольку диалоговое окно печати Chrome не загружает изображения с первой попытки. Это происходит только в том случае, если URL-адрес вашего свойства background-image не соответствует регистру имени физической папки. (Сообщено в версии 48.0.2564.109 m)
— MPaul
3
что является альтернативой в Firefox и IE
— Шан Хан
6
Примечание для будущих путешественников: вы можете использовать color-adjustвместо этого.
— Константин Ван
@ КонстантинВан не поддерживается в Chrome с апреля 2019 года. Это документация Firefox.
— Томас
83

Понял:

CSS: 

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

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

  • (Если верить выводному файлу PDF-принтера ..?)
  • Проверено только в Chrome + Firefox на Ubuntu ...
— T4NK3R
источник
5
Вы можете добавить поддержку 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)
— emik
2
Отлично работает в обычных браузерах, но не в IE, даже с предложением @evami.
— Woz
@woz Он работает в проекте с IE8 / 9. Градиент (так же, как box-shadow) добавляет дополнительный элемент фона, который не устраняется принудительным сбросом браузера. Не могли бы вы поделиться своим CSS?
— emik
2
Похоже, это не работает с последним Chrome (60).
— swervo
1
Это не для меня в Chrome. Я использую 69. Это говорит о том, что он был сломан, по крайней мере, с 60 (согласно комментарию @ swervo).
— иконоборчество
34

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

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— Maxe
источник
22

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

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

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

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

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

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

— Башир Аль-Момани
источник
Возможно, это потому, что у вас уже есть таблица стилей @print, которая сбрасывает цвет фона.
— Никколо М.
О, МОЙ БОГ! это работает, но как это работает? Можете ли вы объяснить, пожалуйста.
— rahim.nagori
1
Это единственное решение, которое до сих пор работало для меня. <div style = "- webkit-print-color-Adjust: точный! важный; фоновый цвет: красный! важный;"> ... </ div>
— Томас
10

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

  1. Важное право в обычном объявлении CSS (даже в печати @media)
  2. Используйте SVG
— yar1
источник
6
! важный решает проблему в любом современном браузере, если включена функция «Печатать цвета фона и изображения».
— Крис Хайнс
2
! важный также работает без вмешательства пользователя, если вы используете его вместе с body {-webkit-print-color-Adjust: точный; } (согласно комментарию выше)
— yar1
2
я обнаружил, что, если я использую color-adjustили вариант webkit, на самом деле мне не нужно важное правило.
— Kasapo
7

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

ПРИМЕРЫ:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
— Гайки-н-пиво
источник
6

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

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

— ядро
источник
1
это безумный хак, но он, по крайней мере, вызывает некоторую форму цвета фона независимо от настроек печати. молодец, спасибо.
— Брэд Захер
6

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

В теге body

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

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— Аамир Шейх
источник
5

Несмотря на то, что !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;
    }
}

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

— Аэльфинн
источник
После нескольких часов поисков я нашел этот ответ. Я вошел и удалил строки из Bootstrap.css и WHAM! Цвета на фоне для печати!
— Могучий ференги
1
Спасибо! Наконец, это ответ, который заставил меня начать работу, но мне нужно было добавить: body {-webkit-print-color-Adjust: точное! Важное; }
— Ocean Airdrop
3

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

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

— Logol
источник
2

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

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

Чтобы сделать это, я должен был использовать комбинацию ! Важное & -webkit-print-color-Adjust: точный! Важный чтобы фон и цвета печатались правильно.

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

<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 */
— Джонатан
источник
2

Проверено и работает над 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>
— Heroselohim
источник
1

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

— алано
источник
1

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

Например:

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

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}
— Gedeon
источник
0

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

}

— ksealey
источник
Я принял ваш подход и попытался заставить его работать на IE11, но, к сожалению, это не сработало. Это было до тех пор, пока я не присвоил !importantзначение каждому атрибуту в моем классе, который затем заставил его работать.
— Sal Alturaigi
0

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

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

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

— Драйден Уильямс
источник
0 
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

— Василий Иванов
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.