CSS @ media-Druckprobleme mit Hintergrundfarbe;

Ich bin neu hier bei dieser Firma und wir haben ein Produkt, das kilometerlange CSS verwendet. Ich versuche, ein druckbares Stylesheet für unsere App zu erstellen, habe jedoch Probleme mit background-colorin @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

Alles andere funktioniert, ich kann die Ränder und dergleichen ändern, background-colorkomme aber im Druck nicht durch. Jetzt verstehe ich, dass Sie meine Frage möglicherweise nicht ohne weitere Details beantworten können. Ich war nur neugierig, ob jemand dieses Problem oder ähnliches hatte.

Wenn ein Benutzer in seinen Druckeinstellungen die Option "Hintergrundfarben und Bilder drucken" deaktiviert hat, wird dies von keinem CSS überschrieben. Berücksichtigen Sie dies also immer. Dies ist eine Standardeinstellung .

Sobald dies so eingestellt ist, dass Hintergrundfarben und Bilder gedruckt werden, funktioniert das, was Sie dort haben.

Es ist an verschiedenen Stellen zu finden. In IE9beta finden Sie es unter Druck-> Seitenoptionen unter Papieroptionen

In FireFox befindet es sich unter Optionen unter Seite einrichten -> Registerkarte [Format & Optionen].

So aktivieren Sie den Hintergrunddruck in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}

Verstanden:

CSS:

box-shadow: inset 0 0 0 1000px gold;

Funktioniert für alle Boxen - einschließlich Tabellenzellen !!!

• (Wenn die PDF-Drucker-Ausgabedatei geglaubt werden soll ..?)
• Nur in Chrome + Firefox unter Ubuntu getestet ...

Versuchen Sie dies, es hat bei mir in Google Chrome funktioniert:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

-webkit-print-color-adjust: exact; allein mussis Not enough man !importantmit dem Attribut verwenden

Dies ist die Druckansicht auf Chrom , nachdem ich hinzugefügt , !importantum jeden background-colorund colorattrubute in jedem Etikett

Dies ist das Drucken der Vorschau auf Chrom vor dem Hinzufügen!important

Um zu wissen, wie man inject !importantden Stil von div erkennt, lesen Sie diese Antwort. Ich kann einem Stil keine „! wichtige“ Regel hinzufügen

Zwei Lösungen, die funktionieren (zumindest in modernem Chrome - nicht darüber hinaus getestet):

1. ! wichtig direkt in der regulären CSS-Deklaration funktioniert (nicht einmal im @ media-Druck)
2. Verwenden Sie svg

Es gibt noch einen weiteren Trick, den Sie ausführen können, ohne die in anderen Beiträgen erwähnte Option für den Druckrahmen zu aktivieren. Da Grenzen sind gedruckt können Sie solide Hintergrund-Farben mit diesem Hack simulieren:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

Aktivieren Sie es, indem Sie die Klasse zu Ihrem Element hinzufügen:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

Obwohl dies zusätzlichen Code und besondere Sorgfalt erfordert, um Hintergrundfarben sichtbar zu machen, ist es dennoch die einzige mir bekannte Lösung.

Beachten dieser Hack funktioniert nicht auf anderen Elementen als display: block;oder display: table-cell;, so zum Beispiel <table class="your-background">und <tr class="your-background">wird nicht funktionieren.

Wir verwenden dies, um Hintergrundfarben in allen Browsern zu erhalten (immer noch IE9 + erforderlich).

Wenn Sie "druckerfreundliche" Seiten erstellen möchten, empfehle ich, Ihrem @ media print CSS "! Important" hinzuzufügen. Dies ermutigt die meisten Browser, Ihre Hintergrundbilder, Farben usw. zu drucken.

BEISPIELE:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

Für Chrom habe ich so etwas verwendet und es hat für mich geklappt.

Innerhalb des Body-Tags

<body style="-webkit-print-color-adjust: exact;"> </body>

Oder sagen wir für ein bestimmtes Element, wenn Sie eine Tabelle haben und ein td, dh eine Zelle, füllen möchten.

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Obwohl die !importantVerwendung allgemein verpönt ist, ist dies der fehlerhafte Code, mit bootstrap.cssdem verhindert wird, dass Tabellenzeilen gedruckt werden background-color.

.table td,
.table th {
    background-color: #fff !important;
}

Angenommen, Sie versuchen, den folgenden HTML-Code zu formatieren:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

Um dieses CSS zu überschreiben, platzieren Sie die folgende (spezifischere) Regel in Ihrem Stylesheet:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Dies funktioniert, weil die Regel spezifischer ist als die Bootstrap-Standardeinstellung.

Ich habe dieses Problem gefunden, weil ich ein ähnliches Problem hatte, als ich versuchte, ein PDF aus einer HTML-Ausgabe in Google Apps Script zu generieren, bei der Hintergrundfarben auch nicht "gedruckt" werden.

Die -webkit-print-color-adjust:exact;und !importantLösungen haben natürlich nicht funktioniert, aber die box-shadow: inset 0 0 0 1000px gold;haben ... toller Hack, vielen Dank :)

Ich dachte, ich würde eine aktuelle und 2015 relevante Hilfe aus einer aktuellen Print-CSS-Erfahrung hinzufügen.

Konnte Hintergründe und Farben unabhängig von den Einstellungen des Druckdialogfelds drucken.

Dazu musste ich eine Kombination aus ! Wichtig & -webkit-print-color-adjust verwenden: genau! Wichtig , damit Hintergrund und Farben richtig gedruckt werden.

Bei der Deklaration von Farben stellte ich außerdem fest, dass die hartnäckigsten Bereiche eine Definition direkt für Ihr Ziel benötigen. Beispielsweise:

<div class="foo">
 <p class="red">Some text</p>
</div>

Und dein CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

Getestet und funktioniert über Chrome, Firefox, Opera und Edge bis 2016/10. Sollte in jedem Browser funktionieren und sollte immer wie erwartet aussehen.

Ok, ich habe ein kleines browserübergreifendes Experiment zum Drucken von Hintergrundfarben durchgeführt. Einfach kopieren, einfügen und genießen!

Hier ist eine vollständig druckbare HTML-Seite für Bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

Die beste "Lösung", die ich gefunden habe, besteht darin, einen markanten "Druck" -Button oder -Link bereitzustellen, der ein kleines Dialogfeld öffnet, in dem fett, kurz und präzise erklärt wird, dass die Druckereinstellungen (mit einer ABC 123-Aufzählungszeichenanweisung) angepasst werden müssen, um den Hintergrund zu aktivieren und Bilddruck. Das war für mich sehr erfolgreich.

In einigen Fällen (Blöcke ohne Inhalt, aber mit Hintergrund) kann sie mithilfe von Rahmen für jeden Block einzeln überschrieben werden.

Beispielsweise:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

Sie können das Tag verwenden canvasund den Hintergrund "zeichnen", was unter IE9, Gecko und Webkit funktioniert.

Wenn es Ihnen nichts ausmacht, ein Bild anstelle einer Hintergrundfarbe (oder möglicherweise ein Bild mit Ihrer Hintergrundfarbe) zu verwenden, hat die folgende Lösung in FireFox, Chrome und sogar IE ohne Überschreibungen für mich funktioniert. Stellen Sie das Bild irgendwo auf der Seite ein und verbergen Sie es, bis der Benutzer druckt.

Das HTML auf der Seite mit dem Hintergrundbild

<img src="someImage.png" class="background-print-img">

Die Css

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}}

Sie nicht setzen die background-colorin der Druckformatvorlage. Setzen Sie einfach das Attribut in die normale CSS-Datei und es funktioniert gut :)

Kasse dieses Beispiel: Die ultimative HTML-Druckvorlage mit Kopf- und Fußzeile

Demo: Die ultimative HTML-Druckvorlage mit Kopf- und Fußzeilendemo

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Funktioniert in Chrome und Edge