it-swarm.com.de

Bootstrap-Druck-CSS entfernt Hintergrundfarbe

Wenn ich bootstrap verwende, wird die Hintergrundfarbe aus dem Fenster entfernt, wenn ich versuche, meine Seite zu drucken. Nahezu alles auf meiner Website verwendet Bootstrap-Klassen. Ich habe herausgefunden, dass Bootstrap @media print verwendet, um die Hintergrundfarbe zu entfernen. Ich benutze auch ein Bootstrap-Theme (Theme United), das auch die Hintergrundfarbe entfernt.

theme-united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

Gibt es eine Möglichkeit, sicherzustellen, dass die Hintergrundfarbe beim Drucken nicht entfernt wird, ohne diese 2 CSS-Dateien zu bearbeiten?

Zum Beispiel: Wenn ich .alert-danger verwende, möchte ich, dass die Warnmeldung gedruckt wird, wenn sie auf dem Bildschirm angezeigt wird. Sie würde also als rotes Feld gedruckt.

Siehe JSFiddle: http://jsfiddle.net/7mtk7wrh/

18
TheatreOfSouls

Leider gibt es keine gute Antwort auf Ihre Frage - aber wenn Sie das Warum verstehen, können Sie einen Weg nach vorne wählen.

Warum?

Es stimmt, dass Bootstrap den @media print { * { color: $fff; background: transparent; }} verwendet - aber es gibt einen sehr guten Grund. Dieses Codebeispiel ist eigentlich vom normalizer.css -Projekt (von einem damaligen College von @mdo's, @necolas) abgeleitet - es ist beabsichtigt, dass sich alle Browser gleich verhalten. Diese Leute haben sich entschieden, die CSS aus einem sehr guten Grund zu "normalisieren":

Bei den meisten Browsern kann man Hintergrundfarbe ein- oder ausschließen, so dass das Verhalten nicht einmal im selben Browser Standard ist. Stellen Sie sich für eine Sekunde eine Website mit sehr dunklem Hintergrund und weißem Text vor. Wenn Sie mit deaktivierten Hintergründen drucken, sieht es so aus, als würden Sie nichts drucken. Wenn Sie tatsächlich weißen Text auf keinen (weißen) Hintergrund drucken.

Es gab keine Möglichkeit, die verschiedenen Verwendungszwecke von Farbe zu berücksichtigen, weshalb sie sich für Schwarz (Schriftart) und Weiß (Hintergrund, eigentlich „transparent“) entscheiden. Sogar die Wahl von Schwarz wurde gut durchdacht - es ist eine bessere Drucklösung, da die meisten Farbdrucker mehr Schwarz "Tinte/Toner" (sparsamer) haben und keine Farbe mischen müssen, um Schwarz zu machen (also schneller).

Denken Sie daran, dass Bootstrap auch ein "Framework" ist - also ein Ausgangspunkt, wenn Sie so wollen - und verdankt @mdo und @necolas der Voraussicht, dies in Bezug auf die Festlegung einer vorhersagbaren Basislinie zu sehen. (Nein, ich kenne sie nicht.)}

Nö ...

Der Gedanke hier lautet also: "Was wäre, wenn wir" zurückgehen "könnten, um dies zu deaktivieren. Leider funktioniert CSS nicht so - Ja, Browser laden die CSS-Deklarationen in eine" Warteschlange ", in der die letzte Deklaration (LIFO oder Last-In) gewonnen wird -first-out), aber ich weiß nicht, wie man diesen Stack entfernen kann, also fügen CSS-Entwickler einfach mehr hinzu ...

Man könnte also davon ausgehen, dass wir diesen Weg zurückgehen können - fügen Sie einen * { background-color: inherit } hinzu. Das Problem ist, dass inherit auf die übergeordnete Eigenschaft zurückgesetzt wird, aber * der Stamm ist, sodass es nichts gibt, auf das Sie zurückgreifen können. Gleiches gilt für initial

Könnte sein!

Wir haben also noch 4 Optionen, von denen Sie keine erhofft haben, aber es ist, was es ist. In der Reihenfolge der Schwierigkeit:

  1. Laden Sie die BS-Quelle (less oder sass) herunter, bearbeiten Sie den fehlerhaften Code und kompilieren Sie ihn. (Sie müssen eine lokale Kopie verwenden, CDNs funktionieren nicht.)
  2. Laden Sie die CSS-Variante Ihrer Wahl herunter, suchen und löschen Sie den anstößigen Code. (Wieder keine CDNs.)
  3. Verwenden Sie getbootstrap.com/customize , um eine neue Variante zu erstellen - schließen Sie "Druckmedienstile" unter "Common CSS" aus. (Wieder keine CDNs)
  4. Überschreiben Sie die spezifischen Elemente, deren Farbe Sie drucken möchten: z.
    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

CDNs BS-Kopien funktionieren nun, aber dann besteht das Problem, dass der Benutzer möglicherweise keine Hintergründe druckt und die Ausgabe weiß (gelb im Beispiel) auf weiß ist!

Endlich

Nun, ich hoffe, dass das Erlernen des Wesens zumindest eine Möglichkeit war, wie Sie an einen Workaround denken. Als Faustregel gilt, dass der Hintergrund beim Drucken immer weiß ist (sollte). Wenn Sie auf diese Weise eingeschränkt sind, denken Sie an neuartige Ideen wie Ausrufezeichen um den Text, der nur "gedruckt" wird (@media only screen { .hidden-screen { display: none; }}).

29
Vino

Obwohl die Verwendung von !important generell missbilligt wird, handelt es sich hierbei um den fehlerhaften Code in bootstrap.css.

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

Nehmen wir an, Sie versuchen, den folgenden HTML-Code zu gestalten:

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

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

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

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

2
The Aelfinn

ich hatte auch das gleiche Problem .. Ich entferne einfach die bootstrap.min.css aus meinem Code und dann funktioniert es für mich.

1
ihsan

Sie können dies erreichen, indem Sie diese Zeilen aus der bootstrap.css-Datei entfernen. Möglicherweise gibt es hierfür eine Jquery-Lösung, die jedoch viel komplizierter ist als das Löschen einiger Zeilen. : /

Oder Sie können ein Plugin mit dem Namen html2canvas verwenden, wie in diesem jsfiddle dargestellt.

1
odedta

machen Sie einfach den Spezifitätswert spezifischer und Sie sollten in Ordnung sein. so etwas wie:

@media print {
   tbody>tr:nth-child(even)>td {
        background-color: rgb(230, 216, 216) !important;
    }
}
0
Wesly Backers

@Vino hat das wirklich gut erklärt. Ich stand auch vor Problemen, weil bootstrap.css den Hintergrund nachdrücklich transparent macht. Daher habe ich das spezifische Element in meiner benutzerdefinierten CSS-Datei angepasst. Denken Sie daran, <.element> mit dem Element zu ändern, in dem der farbige Hintergrund nicht transparent sein soll.

@media print {
	 .element{
		background-color: white !important;
		box-shadow:  inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
	 }
 } 

0
J Singh

Am Ende hatte ich dasselbe Problem, aber ich fand heraus, dass Chrome eine Option zum Anzeigen von Hintergrundgrafiken im Druckdialogfeld mit weiteren Einstellungen enthält, die genau das taten. Keine Änderung von Bootstrap (4) erforderlich.

0
Davies-Barnard