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

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

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

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

media print CSS в теле:

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

обновление Итак, ваша проблема-bootstrap.css...у него есть медиа-печать css, как и у вас....вы удалите это, и это должно дать вам цвет....вам нужно либо сделать свой собственный, либо придерживаться bootstraps print css.

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

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

background-color: #f5f5f5 !important;

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

Это не имеет ничего общего с css, @media или специфичность. Вероятно, вы можете взломать его, но самый простой способ заставить chrome показать цвет фона и другую графику-правильно установить этот флажок в разделе "Дополнительные настройки".

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

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

используйте следующее в таблице стилей @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.
• обнулить высоту / ширину в зависимости от того, что вы контролируете в атрибуте границы.
• цвет шрифта по умолчанию черный, если вы не используете !важно!--7-->
• установите line-height в 0, чтобы исправить для коробки, не имеющей физического размера.
• сделать и разместить свои собственные PNGs : -)
• если текст в блоке нужно обернуть, поместите его в div и расположите div, используя position: relative; и удалить высоту линии.

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

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

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

ваш CSS должен быть такой:

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

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

ДЛЯ ТЕХ, КТО ИСПОЛЬЗУЕТ BOOTSTRAP.CSS, это исправление!

Я пробовал все решения и они не работали... пока я не обнаружил этот бутстрэп.у 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.минута.css)

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

@media print {
  body { 
    -webkit-print-color-adjust: exact; 
  }
  .customClass{
     //customCss + !important;
  }
  //more of your custom 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 Для: перед элементами, является копией из это так ответ

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

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

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

Если вы загружаете Bootstrap без опции" стили печати носителей", у вас не будет этой проблемы, и вам не придется вручную удалять код "@media print" в вашем bootstrap.файл CSS.

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

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

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

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