Diese Frage wurde bereits gestellt, aber die Lösung ist in meinem Fall nicht anwendbar. Ich möchte sicherstellen, dass bestimmte Hintergrundbilder gedruckt werden, da sie ein wesentlicher Bestandteil der Seite sind. (Es handelt sich nicht um Bilder direkt auf der Seite, da mehrere davon als CSS-Sprites verwendet werden.)
Eine andere Lösung für dieselbe Frage schlägt die Verwendung vor list-style-image
, die nur funktioniert, wenn Sie für jedes Symbol ein anderes Bild haben und keine CSS-Sprites möglich sind.
Gibt es neben der Erstellung einer separaten Seite mit den Symbolen inline eine andere Lösung?
quelle
Browser haben standardmäßig die Option, Hintergrundfarben und Bilder zu drucken, die deaktiviert sind. Sie können einige Zeilen in CSS hinzufügen, um dies zu umgehen. Einfach hinzufügen:
quelle
!important
notwendig?color-adjust
wird von FireFox leider nicht richtig unterstützt. Es scheint nur für den Hintergrund zu gelten, nicht für diecolor
CSS-Eigenschaft. Es wird als Fehler gemeldet , ohne viel Aktivität oder Stimmen. Das Beibehalten des Hintergrunds ist ziemlich nutzlos, wenn die Schriftfarbe nicht beibehalten wird, was dazu führt, dass sie nicht lesbar ist.Ich habe einen Weg gefunden, das Hintergrundbild mit CSS zu drucken. Es hängt ein bisschen davon ab, wie Ihr Hintergrund aufgebaut ist, aber es scheint für meine Anwendung zu funktionieren.
Im Wesentlichen fügen Sie das
@media print
am Ende Ihres Stylesheets hinzu und ändern den Hintergrund des Körpers geringfügig.Beispiel, wenn Ihr aktuelles CSS so aussieht:
Am Ende Ihres Stylesheets fügen Sie Folgendes hinzu:
Dadurch wird das Bild dem Körper als "Vordergrund" -Bild hinzugefügt, sodass es druckbar ist. Möglicherweise müssen Sie zusätzliches CSS hinzufügen, um das
z-index
richtige Ergebnis zu erzielen. Aber auch hier hängt es davon ab, wie Ihre Seite aufgebaut ist.Dies funktionierte für mich, als ich kein Header-Bild in der Druckansicht anzeigen konnte.
quelle
<img>
(für RWD) gegen eine andere zu tauschen@media print
. Das Webbild befand sich auf einem dunklen Hintergrund, sodass das Drucken dieses Bildes auf weißem Papier nicht funktionierte und ich Benutzer nicht zwingen wollte, einen dunklen Hintergrund auf die Kopfzeile zu drucken. Perfekt!Der folgende Code funktioniert gut für mich (zumindest für Chrome).
Ich habe auch einige Steuerelemente für Rand- und Seitenausrichtung hinzugefügt (Hoch- und Querformat).
quelle
Stellen Sie sicher, dass Sie das Attribut! Important verwenden. Dies erhöht die Wahrscheinlichkeit, dass Ihre Stile beim Drucken beibehalten werden, erheblich.
quelle
Wie @ ckpepper02 sagte, funktioniert die Option body content: url gut. Ich habe jedoch festgestellt, dass Sie, wenn Sie es geringfügig ändern, damit einfach eine Art Header-Bild hinzufügen können, indem Sie das Pseudo-Element: before wie folgt verwenden.
Dadurch wird das Bild oben auf der Seite verschoben, und nach meinen begrenzten Tests funktioniert es in Chrome und im IE9
-hanz
quelle
Verwenden Sie Pseudo-Elemente. Während viele Browser Hintergrundbilder ignorieren, sind Pseudo-Elemente, deren Inhalt auf ein Bild festgelegt ist, technisch gesehen KEINE Hintergrundbilder. Sie können das Hintergrundbild dann ungefähr dort positionieren, wo es hätte sein sollen (obwohl es nicht so einfach oder präzise ist wie das Originalbild).
Ein Nachteil ist, dass Sie dieses Verhalten außerhalb Ihrer Druckmedienabfrage angeben und dann im Druckmedienabfrageblock sichtbar machen müssen, damit dies in Chrome funktioniert. Also so etwas ...
Der Nachteil ist, dass das Bild beim normalen Laden von Seiten häufig heruntergeladen wird, wodurch unnötige Masse hinzugefügt wird. Sie können dies vermeiden, indem Sie nur dasselbe Bild / denselben Pfad verwenden, den Sie bereits für das ursprüngliche, sichtbare Bild verwendet haben.
quelle
Es funktioniert in Google Chrome, wenn Sie ein wichtiges Attribut zum Hintergrundbild hinzufügen. Stellen Sie sicher, dass Sie zuerst ein Attribut hinzufügen und es erneut versuchen. Sie können es so machen
}}
quelle
Sie können Rahmen für feste Farben verwenden.
und für den Hintergrund mit Farbverlauf können Sie Folgendes verwenden:
quelle
https://gist.github.com/danomanion/6175687 schlägt eine elegante Lösung vor, bei der anstelle eines Hintergrundbilds ein benutzerdefiniertes Aufzählungszeichen verwendet wird:
Indem Sie dies in a aufnehmen
Block kann ich ein weiß-auf-transparentes Logo auf dem Bildschirm, das als Hintergrundbild gerendert wird, durch ein schwarz-auf-transparentes Logo für den Druck ersetzen.
quelle
Sie können solche Tricks machen:
Im Body-Tag:
quelle