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-color
in @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-color
komme 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.
css
media-queries
Weston Watson
quelle
quelle
@media print
Abfrage hat, die Hintergrundfarben aus Tabellen entfernt (z. B. Streifen).Antworten:
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].
quelle
*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
So aktivieren Sie den Hintergrunddruck in Chrome:
quelle
color-adjust
stattdessen verwenden.Verstanden:
CSS:
Funktioniert für alle Boxen - einschließlich Tabellenzellen !!!
quelle
-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)Versuchen Sie dies, es hat bei mir in Google Chrome funktioniert:
quelle
-webkit-print-color-adjust: exact;
allein mussis Not enough
man!important
mit dem Attribut verwendenDies ist die Druckansicht auf Chrom , nachdem ich hinzugefügt ,
!important
um jedenbackground-color
undcolor
attrubute in jedem EtikettDies ist das Drucken der Vorschau auf Chrom vor dem Hinzufügen
!important
Um zu wissen, wie man
inject
!important
den Stil von div erkennt, lesen Sie diese Antwort. Ich kann einem Stil keine „! wichtige“ Regel hinzufügenquelle
Zwei Lösungen, die funktionieren (zumindest in modernem Chrome - nicht darüber hinaus getestet):
quelle
color-adjust
die wichtige Regel nicht benötige , wenn ich oder die Webkit-Variante verwende.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:
Aktivieren Sie es, indem Sie die Klasse zu Ihrem Element hinzufügen:
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;
oderdisplay: 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).
quelle
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:
quelle
Für Chrom habe ich so etwas verwendet und es hat für mich geklappt.
Innerhalb des Body-Tags
Oder sagen wir für ein bestimmtes Element, wenn Sie eine Tabelle haben und ein td, dh eine Zelle, füllen möchten.
quelle
Obwohl die
!important
Verwendung allgemein verpönt ist, ist dies der fehlerhafte Code, mitbootstrap.css
dem verhindert wird, dass Tabellenzeilen gedruckt werdenbackground-color
.Angenommen, Sie versuchen, den folgenden HTML-Code zu formatieren:
Um dieses CSS zu überschreiben, platzieren Sie die folgende (spezifischere) Regel in Ihrem Stylesheet:
Dies funktioniert, weil die Regel spezifischer ist als die Bootstrap-Standardeinstellung.
quelle
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!important
Lösungen haben natürlich nicht funktioniert, aber diebox-shadow: inset 0 0 0 1000px gold;
haben ... toller Hack, vielen Dank :)quelle
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:
Und dein CSS:
quelle
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:
quelle
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.
quelle
In einigen Fällen (Blöcke ohne Inhalt, aber mit Hintergrund) kann sie mithilfe von Rahmen für jeden Block einzeln überschrieben werden.
Beispielsweise:
quelle
Sie können das Tag verwenden
canvas
und den Hintergrund "zeichnen", was unter IE9, Gecko und Webkit funktioniert.quelle
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
Die Css
}}
quelle
!important
jedem Attribut in meiner Klasse einen Wert gab, der es dann zum Laufen brachte.Sie nicht setzen die
background-color
in 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
quelle
Funktioniert in Chrome und Edge
quelle