CSS @ media-Druckprobleme mit Hintergrundfarbe;

176

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.

Weston Watson
quelle
Nun, es besteht den W3C CSS-Validator ( jigsaw.w3.org/css-validator ). Das ist komisch
GôTô
Dies sollte kein Problem mehr sein. Ich bin auf dieses Problem gestoßen, weil ich eine Bootstrap-Seite hatte und Bootstrap eine @media printAbfrage hat, die Hintergrundfarben aus Tabellen entfernt (z. B. Streifen).
Martin Thoma
@MartinThoma Wie haben Sie das Problem behoben? Haben Sie das CSS aus der Boostrap-Vorlage entfernt?
EduLopez

Antworten:

242

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].

Ryan Ternier
quelle
10
Großartig, Sie haben mir gerade Stunden erspart, mein Gehirn über dieses CSS zu zerbrechen.
Weston Watson
160
Mit Chrome und Safari können Sie den CSS-Stil "-webkit-print-color-adjust: genau;" hinzufügen. zu dem Element, um das Drucken der Hintergrundfarbe und / oder des Bildes zu erzwingen
Marco Bettiolo
11
@MarcoBettiolo scheint nicht an den neuesten Webkit-Builds zu arbeiten, wichtig jedoch
Hedde van der Heide
2
Das Hinzufügen von! Wichtig zur Regel hat es auch für mich gelöst.
Thiago Duarte
14
Um dies zu erweitern, habe ich die Farbanpassung hinzugefügt: genau; damit FF funktioniert. Also mein vollständiger Code ist*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
BitBug
250

So aktivieren Sie den Hintergrunddruck in Chrome:

body {
  -webkit-print-color-adjust: exact !important;
}
Drolex
quelle
7
Dies scheint mein Problem beim Drucken einer Tabelle mit alternativen Zeilenfarben gelöst zu haben.
Victor J. Garcia
Stellen Sie sicher, dass Sie das richtige Gehäuse für Ihren Bildpfad verwenden, da der Druckdialog von Chrome die Bilder nicht beim ersten Versuch lädt. Dies geschieht nur für den Fall, dass die URL Ihrer Hintergrundbildeigenschaft nicht mit dem Groß- und Kleinschreibung des Namens des physischen Ordners übereinstimmt. (Berichtet in Version 48.0.2564.109 m)
MPaul
3
Was ist die Alternative in Firefox und IE
Shan Khan
5
Ein Hinweis für zukünftige Zeitreisende: Vielleicht möchten Sie color-adjuststattdessen verwenden.
8онстантин Ван
@ КонстантинВан Ab April 2019 wird es in Chrome nicht mehr unterstützt. Dies ist eine Firefox-Dokumentation.
Thomas
82

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 ...
T4NK3R
quelle
5
Sie können IE8- und IE9-Unterstützung hinzufügen mit -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ Wenn Sie möchten, dass Ihre Sprite-Bilder sichtbar sind, verwenden Sie die img / clip-Technik css-tricks.com/css-sprites-with-inline-images , mit der Sie Bilder in IE9 und FF erhalten ( nicht IE8 obwohl)
Emik
2
Funktioniert hervorragend in normalen Browsern, aber nicht im IE, selbst mit dem Vorschlag von @evami.
Woz
@woz Ich habe es in einem Projekt mit IE8 / 9 funktionieren. Der Farbverlauf (genau wie Box-Shadow) fügt ein zusätzliches Hintergrundelement hinzu, das durch das erzwungene Zurücksetzen des Browsers nicht beseitigt wird. Würde es Ihnen etwas ausmachen, Ihre CSS zu teilen?
Emik
2
Dies scheint mit dem neuesten Chrome (60) nicht zu funktionieren.
Swervo
1
Dies schlägt für mich in Chrome fehl. Ich benutze 69. Das deutet darauf hin, dass es mindestens seit 60 kaputt ist (gemäß @ swervos Kommentar).
Bilderstürmer
34

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

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

-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

Druckvorschau auf Chrom

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

Geben Sie hier die Bildbeschreibung ein

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

Basheer AL-MOMANI
quelle
Vielleicht liegt es daran, dass Sie bereits ein @ print-Stylesheet haben, das die Hintergrundfarbe zurücksetzt.
Niccolo M.
OH MEIN GOTT! es funktioniert aber wie funktioniert das? Kannst du bitte Erklären.
rahim.nagori
1
Das ist die einzige Lösung, die bisher für mich funktioniert hat. <div style = "- Webkit-Druck-Farbanpassung: genau! wichtig; Hintergrundfarbe: rot! wichtig;"> ... </ div>
Thomas
10

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
yar1
quelle
6
! wichtig löst das Problem in jedem modernen Browser, solange "Hintergrundfarben und Bilder drucken" aktiviert ist.
Chris Hynes
2
! wichtig funktioniert auch ohne Benutzereingriff, wenn Sie es zusammen mit body verwenden {-webkit-print-color-adjust: genau; } (wie oben kommentiert)
yar1
2
Ich habe festgestellt, dass ich color-adjustdie wichtige Regel nicht benötige , wenn ich oder die Webkit-Variante verwende.
Kasapo
6

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).

Kernel
quelle
1
Es ist ein verrückter Hack, aber es erzwingt zumindest irgendeine Form von Hintergrundfarbe, unabhängig von den Druckeinstellungen. Genial, danke.
Brad Zacher
6

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;
Nüsse-n-Bier
quelle
6

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>
Aamir Shaikh
quelle
5

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.

Der Aelfinn
quelle
Nach stundenlangem Suchen fand ich diese Antwort. Ich ging hinein und entfernte die Zeilen von Bootstrap.css und WHAM! Farben im druckbaren Hintergrund!
Mächtiger Ferengi
1
Danke dir! Schließlich ist dies die Antwort, die mich zum Laufen gebracht hat, aber ich musste hinzufügen: body {-webkit-print-color-adjust: genau! Wichtig; }
Ocean Airdrop
3

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 :)

logol
quelle
2

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 */
Jonathan
quelle
2

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>
Heroselohim
quelle
1

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.

alano
quelle
1

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;
  }
}
Gedeon
quelle
0

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

Thomas Lecavelier
quelle
0

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

}}

ksealey
quelle
Ich habe Ihren Ansatz gewählt und versucht, ihn auf IE11 zum Laufen zu bringen, aber leider hat er nicht funktioniert. Das war, bis ich !importantjedem Attribut in meiner Klasse einen Wert gab, der es dann zum Laufen brachte.
Sal Alturaigi
0
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

Wassili Iwanow
quelle