Цвет фона не отображается в предварительном просмотре

Я пытаюсь распечатать страницу. На этой странице я дал таблицу цвет фона. Когда я просматриваю предварительный просмотр в Chrome, он не принимает свойство цвета фона ...

Итак, я попробовал это свойство:

-webkit-print-color-adjust: exact; 

но по-прежнему не показывает цвет.

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

CSS-свойство Chrome -webkit-print-color-adjust: exact;работает надлежащим образом.

Однако убедиться, что у вас есть правильный CSS для печати, часто бывает сложно. Чтобы избежать трудностей, которые вы испытываете, можно сделать несколько вещей. Во-первых, отделите весь ваш CSS для печати от вашего CSS для экрана. Это делается через @media printи@media screen .

Часто просто установить какой-то дополнительный @media printCSS недостаточно, потому что при печати все еще включаются все остальные CSS. В этих случаях вам просто нужно знать о специфике CSS, поскольку правила печати автоматически не выигрывают у правил CSS без печати.

В вашем случае -webkit-print-color-adjust: exactработает. Тем не менее, ваши background-colorи цветовые определения выбиваются другим CSS с более высокой специфичностью.

Хотя я не одобряю использование !importantпрактически при любых обстоятельствах, следующие определения работают должным образом и выявляют проблему:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Вот скрипка (и встроенная для удобства предварительного просмотра печати).

Это свойство CSS - все, что вам нужно, оно работает для меня ... При предварительном просмотре в Chrome у вас есть возможность увидеть его черно-белое и цветное ( Цвет: Параметры-Цвет или Черно-белый ), поэтому, если у вас нет этого параметра, то Я предлагаю взять это расширение Chrome и сделать вашу жизнь проще:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

Сайт, который вы добавили на fiddle, нуждается в этом в вашей медиа-печати css (вам нужно просто добавить его ...

Медиа печать CSS в теле:

@media print {
body {-webkit-print-color-adjust: exact;}
}

ОБНОВИТЬ ОК, так что ваша проблема - bootstrap.css ... он имеет медиа-печать css так же, как и вы ... вы удаляете это, и это должно дать вам цвет .... вам нужно либо сделать свое дело, либо придерживаться бутстрапс печать css.

Когда я нажимаю на печать, я вижу цвет .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

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

Это не имеет ничего общего с CSS, @media или спецификой. Возможно, вы можете обойти это, но самый простой способ получить хром, чтобы показать цвет фона и другую графику, это правильно установить этот флажок в разделе «Дополнительные параметры».

Мне просто нужно было добавить !importantатрибут в тег background-color, чтобы он появился, мне не понадобилась часть webkit:

background-color: #f5f5f5 !important;

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

<link rel="stylesheet" media="screen" href="">

Ваш CSS должен быть таким:

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }
}

.vendorListHeading th {
   background-color: #1a4567 !important;
   color: white !important;   
}

Для тех, кто использует BOOTSTRAP.CSS, это исправление!

Я перепробовал все решения, и они не работали ... пока я не обнаружил, что bootstrap.css был очень раздражающим, @media printкоторый сбрасывает все ваши цвета, цвета фона, тени и т.д. ...

@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}

Так что либо удалите этот раздел из bootstrap.css (или bootstrap.min.css)

Или переопределите эти значения в CSS страницы, которую вы хотите распечатать на свой собственный @media print

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom css
}

Используйте следующее в вашей @media printтаблице стилей.

h1 {
    background-color:#404040;
    background-image:url("img/404040.png");
    background-repeat:repeat;
    box-shadow: inset 0 0 0 1000px #404040;
    border:30px solid #404040;
    height:0;
    width:100%;
    color:#FFFFFF !important;
    margin:0 -20px;
    line-height:0px;
}

Вот пара вещей, на которые стоит обратить внимание:

• background-color - абсолютный запасной вариант и в основном для потомков.
• background-image использует пиксель размером 1px x 1px размером # 404040, преобразованный в PNG. Если у пользователя включены изображения, он может работать, если нет ...
• Установите коробку-тень, если это не сработает ...
• Граница = 1/2 желаемой высоты и / или ширины коробки, сплошная, цветная. В приведенном выше примере я хотел коробку высотой 60px.
• Обнулить высоту / ширину в зависимости от того, что вы контролируете в атрибуте border.
• Цвет шрифта по умолчанию будет черным, если вы не используете!
• Установите высоту строки равной 0, чтобы зафиксировать для поля, не имеющего физического размера.
• Сделайте и разместите свои собственные PNG :-)
• Если текст в блоке нужно обернуть, поместите его в div и поместите div с помощью position :lative; и удалите высоту строки.

Смотрите мою скрипку для более подробной демонстрации.

Вы уверены, что это проблема CSS? Есть несколько сообщений на Google по этой проблеме: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Это может быть связано с процессом печати. В Safari, который также является webkit, в диалоговом окне принтера есть флажок для печати фоновых изображений и цветов.

Для IE

Если вы используете IE, перейдите к предварительному просмотру печати (щелкните правой кнопкой мыши по документу -> предварительный просмотр печати), перейдите к настройкам и выберите параметр «Печатать цвет фона и изображения», выберите этот параметр и попробуйте.

В файлах начальной загрузки css в разделе @media print {* ,: after,: before ....} есть стиль, имеющий цвет и фоновые стили, помеченные! Важно, которые удаляют любые фоновые цвета на любых элементах. Убейте эти две части CSS, и это сработает.

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

Я использовал ответ purgatory101, но не смог сохранить все цвета (значки, фоны, цвета текста и т. Д.), Особенно из-за того, что таблицы стилей CSS нельзя использовать с библиотеками, которые динамически изменяют цвета элемента DOM. Поэтому вот скрипт, который изменяет стили элемента ( background-colourи colour) перед печатью и очищает стили после завершения печати. Полезно избегать написания большого количества CSS в @media printтаблице стилей, так как она работает независимо от структуры страницы.

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

JSFiddle показывает скрипт в действии

Совместимость: работает в Chrome, я не тестировал другие браузеры.

function setColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var eltBackground = $(elements[i]).css('background-color');
    var eltColor = $(elements[i]).css('color');

    var elementStyle = elements[i].style;
    if (eltBackground) {
      elementStyle.oldBackgroundColor = {
        value: elementStyle.backgroundColor,
        importance: elementStyle.getPropertyPriority('background-color'),
      };
      elementStyle.setProperty('background-color', eltBackground, 'important');
    }
    if (eltColor) {
      elementStyle.oldColor = {
        value: elementStyle.color,
        importance: elementStyle.getPropertyPriority('color'),
      };
      elementStyle.setProperty('color', eltColor, 'important');
    }
  }
}

function resetColors(selector) {
  var elements = $(selector);
  for (var i = 0; i < elements.length; i++) {
    var elementStyle = elements[i].style;

    if (elementStyle.oldBackgroundColor) {
      elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
      delete elementStyle.oldBackgroundColor;
    } else {
      elementStyle.setProperty('background-color', '', '');
    }
    if (elementStyle.oldColor) {
      elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
      delete elementStyle.oldColor;
    } else {
      elementStyle.setProperty('color', '', '');
    }
  }
}

function setIconColors(icons) {
  var css = '';
  $(icons).each(function (k, elt) {
    var selector = $(elt)
      .parents()
      .map(function () { return this.tagName; })
      .get()
      .reverse()
      .concat([this.nodeName])
      .join('>');

    var id = $(elt).attr('id');
    if (id) {
      selector += '#' + id;
    }

    var classNames = $(elt).attr('class');
    if (classNames) {
      selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
    }

    css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
  });
  $('head').append('<style id="print-icons-style">' + css + '</style>');
}

function resetIconColors() {
  $('#print-icons-style').remove();
}

А затем измените window.printфункцию, чтобы она устанавливала стили перед печатью и сбрасывала их после.

window._originalPrint = window.print;
window.print = function() {
  setColors('body *');
  setIconColors('body .fa');
  window._originalPrint();
  setTimeout(function () {
    resetColors('body *');
    resetIconColors();
  }, 100);
}

Часть, которая находит пути значков для создания CSS: элементы before перед копией этого SO ответа

Вы также можете использовать box-shadowсобственность.

Если вы используете Bootstrap. Просто используйте этот код в вашем файле CSS. Bootstrap удаляет все ваши цвета в предварительном просмотре.

@media print{
  .box-text {

    font-size: 27px !important; 
    color: blue !important;
    -webkit-print-color-adjust: exact !important;
  }
}

Если вы загрузите Bootstrap без опции «Стили печатных носителей», у вас не возникнет этой проблемы, и вам не придется удалять код «@media print» вручную в файле bootstrap.css.

Лучшее решение для этого, если вы используете bootstrap, поэтому просто удалите @media print {} весь код внутри этого. и включите фоновую графику из большего количества настроек во время предварительного просмотра.

Я дважды загружаю свой внешний исходный файл CSS и меняю media = "screen" на media = "print", и все границы для моей таблицы были показаны

Попробуй это :

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

<link rel="stylesheet" media="screen" href="bootstrap.css" />