Wie kann ich Browser zwingen, Hintergrundbilder in CSS zu drucken?

102

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?

DisgruntledGoat
quelle

Antworten:

51

Sie haben nur sehr wenig Kontrolle über die Druckmethoden eines Browsers. Sie können höchstens EMPFEHLEN, aber wenn die Druckeinstellungen des Browsers "Keine Hintergrundbilder drucken" enthalten, können Sie nichts tun, ohne Ihre Seite neu zu schreiben, um die Hintergrundbilder in schwebende "Vordergrund" -Bilder zu verwandeln, die sich zufällig hinter anderen Inhalten befinden.

Marc B.
quelle
209

Mit Chrome und Safari können Sie -webkit-print-color-adjust: exact;dem Element den CSS-Stil hinzufügen , um das Drucken der Hintergrundfarbe und / oder des Bilds zu erzwingen

Marco Bettiolo
quelle
4
Das ist fantastisch. Erleichtert Phantomjs Benutzern / Webkit das Leben erheblich
Jason
1
@MuneemHabib Es funktioniert nicht im Internet Explorer. Der einzige unterstützte Browser ist Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…
Marco Bettiolo
das war der Trick für Chrom ... zum Glück musste ich in diesem Fall nur das Wekkit unterstützen ...
Davy
2
@DisgruntledGoat sollte dies aktualisieren, um die richtige Antwort zu erhalten, da es mein Problem schnell löste (mein Projekt bei der Arbeit konzentriert sich nur auf Chrome). Es funktioniert natürlich nicht für alle Browser, sollte aber unabhängig davon im Voraus bekannt sein.
Brett84c
1
@ Brett84c: Ich bin anderer Meinung, da es sich um eine Lösung nur für einen Browser handelt.
Kukeltje
84

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:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}
Kevin vd Bosch
quelle
ya funktioniert gut, aber Mozilla als nicht standardmäßig
Qh0stM4N
3
Warum ist das !importantnotwendig?
Hat für mich gearbeitet! Danke dir.
Nick Woodhams
color-adjustwird von FireFox leider nicht richtig unterstützt. Es scheint nur für den Hintergrund zu gelten, nicht für die colorCSS-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.
Frédéric
Es ist eine gute Lösung. Denken Sie daran, dass es mit IE11 nicht funktioniert (ich weiß!).
Rafael S. Fijalkowski
76

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 printam Ende Ihres Stylesheets hinzu und ändern den Hintergrund des Körpers geringfügig.

Beispiel, wenn Ihr aktuelles CSS so aussieht:

body {
background:url(images/mybg.png) no-repeat;
}

Am Ende Ihres Stylesheets fügen Sie Folgendes hinzu:

@media print {
body {
   content:url(images/mybg.png);
  }
}

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

ckpepper02
quelle
3
Dies war eine großartige Lösung für das, was ich tun musste, nämlich eine Inline <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!
JHogue
@JHogue - Danke! Ich bin froh, dass es dir geholfen hat.
ckpepper02
4
Dies ist zwar keine "richtige" Antwort. Es ist weitaus hilfreicher als die akzeptierte Antwort.
Xenology
unten Antwort stackoverflow.com/a/15208258/915865 sollte markiert werden, da es eine bessere Erklärung hat, imho
Kat Lim Ruiz
1
In Firefox funktionierte es nur, wenn Sie Inhalte im Inneren verwendet haben: vorher wie @ hanz Antwort
Vaskort
18

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

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>
Tarik
quelle
9

Stellen Sie sicher, dass Sie das Attribut! Important verwenden. Dies erhöht die Wahrscheinlichkeit, dass Ihre Stile beim Drucken beibehalten werden, erheblich.

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}
Nüsse-n-Bier
quelle
Mit dieser Methode habe ich einige einfache "druckerfreundliche" Berichte für mein Unternehmen erstellt. Es funktioniert unter OS X Chrome / Safari und Windows 8 Chrome / IE (habe keine anderen Plattformen ausprobiert).
Nuts-n-Beer
3
Dies scheint keine Auswirkungen auf Chrome, Firefox und Safari auf dem Mac zu haben.
Intcreator
Dies ist genau das, was ich brauchte, um das Attribut auf jede Verwendung dieses bestimmten Elements anzuwenden und das Dokument entsprechend drucken zu lassen. Vielen Dank!
Johnny
7

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.

@media print {
  body:before { content: url(img/printlogo.png);}
}

Dadurch wird das Bild oben auf der Seite verschoben, und nach meinen begrenzten Tests funktioniert es in Chrome und im IE9

-hanz

hanz
quelle
5

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

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

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.

Dtipson
quelle
1

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

    .inputbg {
background: url('inputbg.png') !important;  

}}

Hady El-Hady
quelle
guter Punkt zu erwähnen, löste mein Problem zusammen mit -webkit-print-color-adjust: genau! wichtig;
Czmarc
0

Sie können Rahmen für feste Farben verwenden.

 borderTop: solid 15px black;

und für den Hintergrund mit Farbverlauf können Sie Folgendes verwenden:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;
Victor Batista
quelle
0

https://gist.github.com/danomanion/6175687 schlägt eine elegante Lösung vor, bei der anstelle eines Hintergrundbilds ein benutzerdefiniertes Aufzählungszeichen verwendet wird:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

Indem Sie dies in a aufnehmen

@media print {
}

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.

ms609
quelle
Dies ist eine nette Korrektur, aber es funktioniert nicht wirklich, wenn das Hintergrundbild viel größer als der Container ist. (es streckt meine enthaltende div)
Jabbamonkey
-1

Sie können solche Tricks machen:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

Im Body-Tag:

<img src="YOUR IMAGE URL" class="whater"/>
Saeid Shakiba
quelle