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

Próbuję wydrukować stronę. Na tej stronie nadałem tabeli kolor tła. Gdy przeglądam podgląd wydruku w chromie, nie przyjmuje właściwości koloru tła ...

Więc wypróbowałem tę właściwość:

-webkit-print-color-adjust: exact; 

ale nadal nie pokazuje koloru.

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>[email protected]</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>

Właściwość Chrome CSS -webkit-print-color-adjust: exact;działa poprawnie.

Jednak upewnienie się, że masz poprawny CSS do drukowania, może być często trudne. Można zrobić kilka rzeczy, aby uniknąć trudności. Najpierw oddziel wszystkie CSS wydruku od CSS ekranu. Odbywa się to za pomocą @media printi @media screen.

Często samo skonfigurowanie dodatkowego @media printCSS nie wystarcza, ponieważ podczas drukowania nadal masz wszystkie inne CSS. W takich przypadkach musisz tylko znać specyfikę CSS, ponieważ reguły drukowania nie wygrywają automatycznie z regułami CSS niezwiązanymi z drukowaniem.

W twoim przypadku -webkit-print-color-adjust: exactdziała. Jednak twoje background-colordefinicje i kolory są pobijane przez inne CSS o większej specyficzności.

Chociaż nie popieram używania !importantw prawie żadnych okolicznościach, następujące definicje działają poprawnie i ujawniają problem:

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

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

Oto skrzypce (i osadzone dla ułatwienia podglądu wydruku).

Ta właściwość CSS jest wszystkim, czego potrzebujesz, działa dla mnie ... Podczas podglądu w Chrome możesz zobaczyć BW i kolor ( Kolor: Opcje - Kolor lub Czarno-biały ), więc jeśli nie masz tej opcji, to Sugeruję, aby pobrać to rozszerzenie Chrome i ułatwić Ci życie:

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

Witryna, którą dodałeś do skrzypiec, potrzebuje tego w css media print (musisz to tylko dodać ...

media drukuj CSS w treści:

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

AKTUALIZACJA OK, więc twój problem to bootstrap.css ... ma css z mediami, tak jak ty ... usuwasz to i powinno to dać ci kolor ... musisz zrobić to sam lub trzymać się bootstraps print css.

Po kliknięciu opcji Drukuj na tym widzę kolor .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

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

Nie ma to nic wspólnego z css, @media ani specyfiką. Prawdopodobnie możesz się zhakować, ale najłatwiejszym sposobem, aby chrom pokazał kolor tła i inną grafikę, jest odpowiednie zaznaczenie tego pola wyboru w sekcji Więcej ustawień.

Musiałem tylko dodać !importantatrybut do znacznika koloru tła, aby się pojawił, nie potrzebowałem części webkit:

background-color: #f5f5f5 !important;

Jeśli używasz bootstrap lub innego CSS innej firmy, upewnij się, że określasz tylko ekran multimediów, aby mieć kontrolę nad typem nośnika wydruku we własnych plikach CSS:

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

Twój CSS musi wyglądać tak:

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

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

DLA TYCH ZA POMOCĄ BOOTSTRAP.CSS, to jest poprawka!

Wypróbowałem wszystkie rozwiązania i one nie działały ... dopóki nie odkryłem, że bootstrap.css ma bardzo irytujące, @media printktóre resetuje wszystkie kolory, kolory tła, cienie itp.

@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 zastąp te wartości w css strony, którą chcesz wydrukować na swoim @media print

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

Wykorzystaj następujące elementy w swoim @media printarkuszu stylów.

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, na które należy zwrócić uwagę:

• kolor tła jest absolutną rezerwą i występuje głównie dla potomności.
• Obraz w tle używa piksela 1 x 1 x 1 x 404040, który został przekształcony w PNG. Jeśli użytkownik ma włączone obrazy, może działać, jeśli nie ...
• Ustaw cień pola, jeśli to nie zadziała ...
• Obramowanie = 1/2 żądanej wysokości i / lub szerokości pudełka, pełne, kolorowe. W powyższym przykładzie chciałem mieć pudełko o wysokości 60 pikseli.
• Zeruj wysokość / szerokość w zależności od tego, co kontrolujesz w atrybucie granicy.
• Kolor czcionki będzie domyślnie ustawiony na czarny, chyba że użyjesz! Ważne
• Ustaw wysokość linii na 0, aby naprawić pole, które nie ma wymiaru fizycznego.
• Twórz i przechowuj własne PNG :-)
• Jeśli tekst w bloku musi się zawijać, umieść go w div i ustaw div za pomocą position: relative; i usuń wysokość linii.

Zobacz moje skrzypce, aby uzyskać bardziej szczegółową demonstrację.

Czy na pewno jest to problem z css? W Google jest kilka postów na ten temat: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

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

Dla IE

Jeśli korzystasz z IE, przejdź do podglądu wydruku (kliknij prawym przyciskiem myszy dokument -> podgląd wydruku), przejdź do ustawień i jest dostępna opcja „wydrukuj kolor tła i obrazy”, wybierz tę opcję i spróbuj.

W plikach css bootstrap znajduje się styl pod @media print {* ,: after,: before ....}, który ma style kolorów i tła oznaczone! Ważne, które usuwają kolory tła z dowolnych elementów. Zabij te dwa kawałki css, a to zadziała.

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

Użyłem odpowiedzi purgatory101, ale miałem problem z zachowaniem wszystkich kolorów (ikon, tła, kolorów tekstu itp.), Szczególnie, że arkuszy stylów CSS nie można używać z bibliotekami, które dynamicznie zmieniają kolory elementu DOM. Dlatego oto skrypt, który zmienia style elementu ( background-colouri colour) przed drukowaniem i czyści style po zakończeniu drukowania. Przydatne jest unikanie pisania dużej ilości CSS w @media printarkuszu stylów, ponieważ działa on niezależnie od struktury strony.

Istnieje część skryptu, która została stworzona specjalnie w celu utrzymania koloru ikon FontAwesome (lub dowolnego elementu, który używa :beforeselektora 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 window.printfunkcję, aby ustawić style przed wydrukowaniem i zresetować 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 utworzenia CSS: przed elementami jest kopią tej odpowiedzi SO

Możesz także skorzystać z box-shadowwłaściwości.

jeśli używasz Bootstrap. po prostu użyj tego kodu w swoim niestandardowym pliku css. Bootstrap usuwa wszystkie kolory w podglądzie wydruku.

@media print{
  .box-text {

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

Jeśli pobierzesz Bootstrap bez opcji „Style nośnika wydruku”, nie będziesz mieć tego problemu i nie będziesz musiał ręcznie usuwać kodu „@media print” w pliku bootstrap.css.

Najlepsze rozwiązanie, jeśli używasz bootstrap, więc po prostu usuń @media print {} cały kod z tego kodu. i włącz więcej opcji grafiki w tle podczas wykonywania podglądu wydruku.

Podwójnie ładuję zewnętrzny plik źródłowy css i zmieniam media = "screen" na media = "print", a wszystkie obramowania mojej tabeli zostały pokazane

Spróbuj tego :

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

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