Hintergrundfarbe wird in der Druckvorschau nicht angezeigt

Ich versuche eine Seite zu drucken. Auf dieser Seite habe ich einer Tabelle eine Hintergrundfarbe gegeben. Wenn ich die Druckvorschau in Chrom ansehe, übernimmt sie nicht die Eigenschaft der Hintergrundfarbe ...

Also habe ich diese Eigenschaft ausprobiert:

-webkit-print-color-adjust: exact; 

aber es zeigt immer noch nicht die Farbe.

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>

Die Chrome CSS-Eigenschaft -webkit-print-color-adjust: exact;funktioniert ordnungsgemäß.

Es kann jedoch oft schwierig sein, sicherzustellen, dass Sie das richtige CSS zum Drucken haben. Es können verschiedene Maßnahmen ergriffen werden, um die Schwierigkeiten zu vermeiden, die Sie haben. Trennen Sie zunächst Ihr gesamtes Druck-CSS von Ihrem Bildschirm-CSS. Dies erfolgt über das @media printund @media screen.

Oft @media printreicht es nicht aus, nur ein zusätzliches CSS einzurichten , da auch beim Drucken noch alle anderen CSS enthalten sind. In diesen Fällen müssen Sie sich nur der CSS-Spezifität bewusst sein, da die Druckregeln nicht automatisch gegen nicht gedruckte CSS-Regeln gewinnen.

In Ihrem Fall -webkit-print-color-adjust: exactfunktioniert das. Ihre background-colorund Farbdefinitionen werden jedoch von anderen CSS mit höherer Spezifität übertroffen.

Obwohl ich die Verwendung unter fast allen Umständen nicht befürworte, !importantfunktionieren die folgenden Definitionen ordnungsgemäß und legen das Problem offen:

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

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

Hier ist die Geige (und zur Vereinfachung der Druckvorschau eingebettet ).

Diese CSS-Eigenschaft ist alles, was Sie brauchen. Sie funktioniert für mich ... Bei der Vorschau in Chrome haben Sie die Möglichkeit, sie in BW und Farbe ( Farbe: Optionen - Farbe oder Schwarzweiß ) anzuzeigen. Wenn Sie diese Option also nicht haben, dann Ich schlage vor, diese Chrome-Erweiterung zu nutzen und Ihnen das Leben zu erleichtern:

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

Die Site, die Sie auf fiddle hinzugefügt haben, benötigt dies in Ihrem Mediendruck-CSS (Sie müssen es nur hinzufügen ...

Mediendruck CSS im Körper:

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

UPDATE OK, Ihr Problem ist also bootstrap.css ... es hat genauso wie Sie ein Media Print CSS ... Sie entfernen das und das sollte Ihnen Farbe geben ... Sie müssen entweder Ihr eigenes machen oder dabei bleiben Bootstraps drucken CSS.

Wenn ich auf Drucken klicke, sehe ich Farbe .... http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Chrome rendert beim Drucken keine Hintergrundfarbe oder andere Stile, wenn die Einstellung für die Hintergrundgrafik deaktiviert ist.

Dies hat nichts mit CSS, @media oder Spezifität zu tun. Sie können sich wahrscheinlich darum herumhacken, aber der einfachste Weg, Chrom dazu zu bringen, die Hintergrundfarbe und andere Grafiken anzuzeigen, besteht darin, dieses Kontrollkästchen unter Weitere Einstellungen ordnungsgemäß zu aktivieren.

Ich musste nur das !importantAttribut zum Hintergrundfarben-Tag hinzufügen , damit es angezeigt wurde. Ich brauchte den Webkit-Teil nicht:

background-color: #f5f5f5 !important;

Wenn Sie Bootstrap oder ein anderes CSS von Drittanbietern verwenden, stellen Sie sicher, dass Sie den Medienbildschirm nur darauf angeben, damit Sie die Kontrolle über den Druckmedientyp in Ihren eigenen CSS-Dateien haben:

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

Ihr CSS muss folgendermaßen aussehen:

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

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

Für diejenigen, die BOOTSTRAP.CSS verwenden, ist dies die Lösung!

Ich habe alle Lösungen ausprobiert und sie funktionierten nicht ... bis ich herausfand, dass bootstrap.css ein super nerviges @media printProblem hat, das alle Ihre Farben, Hintergrundfarben, Schatten usw. zurücksetzt.

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

Entfernen Sie diesen Abschnitt entweder aus bootstrap.css (oder aus bootstrap.min.css).

Oder überschreiben Sie diese Werte im CSS der Seite, die Sie selbst drucken möchten @media print

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

Verwenden Sie Folgendes in Ihrem @media printStylesheet.

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

Hier sind ein paar Dinge zu beachten:

• Hintergrundfarbe ist der absolute Fallback und hauptsächlich für die Nachwelt da.
• Hintergrundbild verwendet ein 1px x 1px Pixel von # 404040, das in ein PNG umgewandelt wurde. Wenn der Benutzer Bilder aktiviert hat, funktioniert dies möglicherweise, wenn nicht ...
• Setze den Kastenschatten, wenn das nicht funktioniert ...
• Rand = 1/2 Ihrer gewünschten Höhe und / oder Breite der Box, einfarbig, Farbe. Im obigen Beispiel wollte ich eine 60px hohe Box.
• Stellen Sie die Höhe / Breite auf Null, je nachdem, was Sie im Rahmenattribut steuern.
• Die Schriftfarbe wird standardmäßig auf Schwarz gesetzt, sofern Sie nicht! Wichtig verwenden
• Setzen Sie die Zeilenhöhe auf 0, um zu korrigieren, dass die Box keine physische Abmessung hat.
• Erstelle und hoste deine eigenen PNGs :-)
• Wenn der Text im Block umbrochen werden muss, setzen Sie ihn in ein Div und positionieren Sie das Div mit position: relative; und entfernen Sie die Zeilenhöhe.

Siehe meine Geige für eine detailliertere Demonstration.

Sind Sie sicher, dass dies ein CSS-Problem ist? Es gibt einige Beiträge auf Google zu diesem Thema: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Dies kann mit dem Druckvorgang zusammenhängen. Auf der Safari, die auch ein Webkit ist, gibt es ein Kontrollkästchen zum Drucken von Hintergrundbildern und Farben im Druckerdialog.

Für IE

Wenn Sie IE verwenden, gehen Sie zur Druckvorschau (Rechtsklick auf Dokument -> Druckvorschau), gehen Sie zu den Einstellungen und es gibt die Option "Hintergrundfarbe und Bilder drucken", wählen Sie diese Option aus und versuchen Sie es.

In den Bootstrap-CSS-Dateien unter @media print {*,: after ,: before ....} befindet sich ein Stil, der mit den Bezeichnungen color! Töte diese beiden CSS-Teile und es wird funktionieren.

Bootstrap trifft die ausführende Entscheidung, dass Sie niemals eine Hintergrundfarbe in Drucken haben sollten, also müssen Sie deren CSS bearbeiten oder einen anderen! Wichtigen Stil haben, der eine höhere Priorität hat. Gute Arbeit Bootstrap ...

Ich habe die Antwort von purgatory101 verwendet , hatte jedoch Probleme, alle Farben (Symbole, Hintergründe, Textfarben usw.) beizubehalten, insbesondere, dass CSS-Stylesheets nicht mit Bibliotheken verwendet werden können, die die Farben des DOM-Elements dynamisch ändern. Daher gibt es hier ein Skript, das die Stile ( background-colourund colour) des Elements vor dem Drucken ändert und Stile löscht, sobald der Druckvorgang abgeschlossen ist. Es ist nützlich zu vermeiden, viel CSS in ein @media printStylesheet zu schreiben, da es unabhängig von der Seitenstruktur funktioniert.

Es gibt einen Teil des Skripts, der speziell dafür entwickelt wurde, die Farbe der FontAwesome-Symbole beizubehalten (oder jedes Element, das einen :beforeSelektor zum Einfügen von farbigem Inhalt verwendet).

JSFiddle zeigt das Skript in Aktion

Kompatibilität: Funktioniert in Chrome, ich habe keine anderen Browser getestet.

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

Ändern Sie anschließend die window.printFunktion, um die Stile vor dem Drucken festzulegen und anschließend zurückzusetzen.

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

Der Teil, der Symbolpfade zum Erstellen von CSS für: before-Elemente findet, ist eine Kopie dieser SO-Antwort

Sie können die box-shadowEigenschaft auch verwenden .

Wenn Sie Bootstrap verwenden, verwenden Sie diesen Code einfach in Ihrer benutzerdefinierten CSS-Datei. Bootstrap entfernt alle Ihre Farben in der Druckvorschau.

@media print{
  .box-text {

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

Wenn Sie Bootstrap ohne die Option "Druckmedienstile" herunterladen, tritt dieses Problem nicht auf und Sie müssen den Code "@media print" nicht manuell in Ihrer Datei bootstrap.css entfernen.

Die beste Lösung hierfür, wenn Sie Bootstrap verwenden. Entfernen Sie einfach eines: @media print {} den gesamten Code darin. und aktivieren Sie Hintergrundgrafiken aus mehr Einstellungen, während Sie die Druckvorschau aufnehmen.

Ich lade meine externe CSS-Quelldatei doppelt und ändere media = "screen" in media = "print". Alle Rahmen für meine Tabelle wurden angezeigt

Versuche dies :

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

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