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

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

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

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

media print CSS в теле:

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

обновление Хорошо, так что ваша проблема bootstrap.css...it имеет медиа - печать 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 используйте следующее.

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 является абсолютным резервным вариантом и существует в основном для потомков.
• фон-изображение в 1 пиксель х 1 пиксель пиксель #404040 выполнен в виде PNG. Если у пользователя включены изображения, он может работать, если нет...
• установите поле-тень, если это не работает...
• граница = 1/2 желаемой высоты и / или ширины коробки, чистый цвет. В приведенном выше примере я хотел 60px высота коробки.
• обнуление высоты / ширины в зависимости от того, что вы контролируете в атрибуте границы.
• цвет шрифта по умолчанию черный, если вы не используете !важно
• установите высоту линии в 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();
}

изменить

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

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

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

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

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

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

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

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