Kolor tła nie jest wyświetlany w podglądzie wydruku

Ta właściwość CSS jest wszystkim czego potrzebujesz to działa dla mnie...Podczas podglądu w Chrome masz opcję, aby zobaczyć go BW i kolor ( Color: Options-kolor lub czarno-biały) więc jeśli nie masz tej opcji, proponuję chwycić to rozszerzenie Chrome i ułatwić sobie życie:

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

Strona dodana na fiddle potrzebuje tego w Twoim media print css (masz wystarczy dodać...

Media Drukuj CSS w ciele:

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

UPDATE OK więc twój problem jest bootstrap.css...it ma druk multimedialny css tak dobrze, jak ty....usuń to i to powinno dać ci kolor....musisz zrobić swój własny lub trzymać się bootstraps print css.

Kiedy klikam drukuj na tym widzę kolor.... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Po prostu musiałem dodać atrybut !important Na znacznik koloru tła, aby się pojawił, nie potrzebowałem części webkit:

background-color: #f5f5f5 !important;

Chrome nie renderuje koloru tła ani kilku innych stylów podczas drukowania, jeśli ustawienie grafiki w tle jest wyłączone.

To nie ma nic wspólnego z css, @ media, czy specyfiką. Prawdopodobnie możesz się włamać, ale najprostszym sposobem, aby chrome pokazał kolor tła i inne grafiki, jest prawidłowe zaznaczenie tego pola wyboru pod więcej ustawień.

Jeśli używasz Bootstrap lub innego CSS innej firmy, upewnij się, że podajesz ekran multimediów tylko na nim, więc masz kontrolę nad typem mediów drukowanych w swoich własnych plikach CSS:

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

Użyj poniższego arkusza stylów @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;
}

Oto kilka rzeczy do zapamiętania:

• kolor tła jest absolutnym rezerwowym i jest głównie dla potomności.
• obraz tła wykorzystuje piksel 1px x 1px z #404040 zrobiony w PNG. Jeśli użytkownik ma włączone obrazy, może działać, jeśli nie...
• Ustaw box-shadow, jeśli to nie zadziała...
• Border = 1/2 żądanej wysokości i / lub szerokości pudełka, bryły, koloru. W powyższym przykładzie chciałem pudełko o wysokości 60px.
• Zeruj wysokość / szerokość w zależności od tego, co kontrolujesz w atrybucie border.
• kolor czcionki będzie domyślnie czarny, chyba że użyjesz !ważne
• Ustaw wysokość linii na 0, aby naprawić pudełko, które nie ma fizycznego wymiaru.
• Twórz i Hostuj własne PNGs : -)
• Jeśli tekst w bloku musi zostać zawinięty, umieść go w polu div I ustaw div za pomocą position: relative; oraz Usuń wiersz-height.

Zobacz moje Po Więcej szczegółowa demonstracja.

Jesteś pewien, że to problem z css ? Jest kilka postów na temat tego problemu w google: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Może to być związane z procesem drukowania. W safari, która jest również webkit, w oknie dialogowym drukarki znajduje się pole wyboru do drukowania obrazów tła i kolorów.

Twój CSS musi być taki:

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

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

DLA OSÓB KORZYSTAJĄCYCH Z BOOTSTRAP.CSS, to jest poprawka!

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

Więc albo usuń tę sekcję z bootstrap.css (lub bootstrap./ min.css)

Lub nadpisać te wartości w css strony, którą chcesz wydrukować we własnym @media print

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

Użyłem odpowiedzi purgatory101 ale miałem problem z utrzymaniem wszystkich kolorów (ikony, tła, kolory tekstu itp...), zwłaszcza, że arkusze stylów CSS nie mogą być używane z bibliotekami, które dynamicznie zmieniają kolory elementu DOM. Dlatego tutaj jest skrypt, który zmienia style elementu (background-colour i colour) przed wydrukowaniem i czyści Style po wydrukowaniu. Warto unikać pisania wielu CSS w arkuszu stylów @media print, ponieważ działa on niezależnie od struktury strony.

Istnieje część skryptu, która jest specjalnie stworzona, aby zachować kolor ikon FontAwesome (lub dowolny element, który używa selektora :before do wstawiania kolorowej zawartości).

JSFiddle pokazujący skrypt w akcji

Kompatybilność: Działa w Chrome, nie testowałem innych przeglądarek.

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();
}

A następnie zmodyfikuj funkcję window.print, aby ustawiała style przed drukowaniem i resetowała je po.

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

Część, która znajduje ścieżki ikon do tworzenia CSS dla: before elements jest kopią z this so answer

Istnieje styl w plikach css Bootstrap pod @media print {*,: after,: before ....} które mają oznaczone style koloru i tła !ważne, które usuwają wszelkie kolory tła na dowolnych elementach. Zabij te dwa kawałki css i będzie działać.

Bootstrap podejmuje decyzję, że powinieneś nigdy nie mieć żadnego koloru tła w wydrukach, więc musisz edytować ich css lub mieć inny !ważny styl, który ma wyższy priorytet. Dobra robota...

Można również użyć właściwości box-shadow.

Jeśli pobierzesz Bootstrap bez opcji "Print media styles", nie będziesz miał tego problemu i nie będziesz musiał ręcznie usuwać kodu" @media print " z bootstrap.plik css.

Dwukrotnie Ładuję swój zewnętrzny plik źródłowy css i zmieniam media = "screen" na media= "print" i wyświetlane są wszystkie obramowania mojej tabeli

Spróbuj tego:

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

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