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


Diese Frage wurde vorher gefragt aber die Lösung ist in meinem Fall nicht anwendbar. Ich möchte sicherstellen, dass bestimmte Hintergrundbilder gedruckt werden, da sie integraler Bestandteil der Seite sind. (Sie sind keine Bilder direkt auf der Seite, da mehrere von ihnen als CSS-Sprites verwendet werden.)

Eine andere Lösung zu dieser Frage schlägt vor, zu verwenden list-style-image, das funktioniert nur, wenn Sie für jedes Symbol ein anderes Bild haben, keine CSS-Sprites möglich.

Abgesehen davon, dass Sie eine separate Seite mit den Symbolen inline erstellen, gibt es eine andere Lösung?


75
2017-07-12 19:48


Ursprung


Antworten:


Sie haben sehr wenig Kontrolle über die Druckmethoden eines Browsers. Allenfalls können Sie EMPFEHLEN, aber wenn die Druckeinstellungen des Browsers "keine Hintergrundbilder drucken" haben, können Sie nichts tun, ohne Ihre Seite neu zu schreiben, um die Hintergrundbilder in schwebende "Vordergrundbilder" zu verwandeln, die hinter anderen Inhalten liegen.


43
2017-07-12 19:51



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


166
2018-01-16 11:12



Ich habe eine Möglichkeit gefunden, das Hintergrundbild mit CSS zu drucken. Es hängt ein bisschen davon ab, wie Ihr Hintergrund angelegt ist, aber es scheint für meine Anwendung zu funktionieren.

Im Wesentlichen fügen Sie das hinzu @media print bis zum Ende Ihres Stylesheets und ändern Sie leicht den Körperhintergrund.

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

Dies fügt dem Bild das Bild als "Vordergrund" -Bild hinzu und macht es somit druckbar. Möglicherweise müssen Sie einige zusätzliche CSS hinzufügen, um die z-index richtig. Aber noch einmal, es hängt davon ab, wie Ihre Seite angelegt ist.

Das funktionierte für mich, als ich kein Header-Bild in der Druckansicht bekommen konnte.


63
2017-09-26 23:25



Browser haben standardmäßig die Möglichkeit, Hintergrundfarben und Bilder zu deaktivieren. 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*/
}

26
2017-07-04 14:03



Der folgende Code funktioniert gut für mich (zumindest für Chrome).

Ich habe auch einige Rand- und Seitenausrichtung hinzugefügt (Hochformat, 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>

8
2017-12-11 22:55



Wie @ ckpepper02 sagte, funktioniert die Option body content: url gut. Ich fand jedoch, dass wenn Sie es leicht ändern, Sie es einfach verwenden können, um ein Header-Bild von Arten hinzuzufügen, indem Sie das Vorher-Pseudo-Element wie folgt verwenden.

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

Dadurch wird das Bild am oberen Rand der Seite verschoben, und von meinen begrenzten Tests funktioniert es in Chrome und dem IE9

-hatz


6
2017-11-26 15:44



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

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

#example2 {
    background-color: #123456 !important;
}

6
2018-04-25 00:09



Verwenden Sie Pseudo-Elemente. Während viele Browser Hintergrundbilder ignorieren, sind Pseudo-Elemente, deren Inhalt auf ein Bild eingestellt ist, technisch gesehen keine Hintergrundbilder. Sie können das Hintergrundbild dann grob positionieren, wohin das Bild hätte gehen sollen (obwohl es nicht so einfach oder genau wie das Originalbild ist).

Ein Nachteil besteht darin, dass Sie dieses Verhalten außerhalb von Ihrer Druckmedienabfrage festlegen müssen, um dies in Chrome zu ermöglichen, und es dann im Druckmedien-Abfrageblock sichtbar zu machen. 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 bei normalen Seitenladevorgängen oft heruntergeladen wird, was unnötige Massen hinzufügt. Sie können dies vermeiden, indem Sie einfach dasselbe Bild / denselben Pfad verwenden, den Sie bereits für das ursprüngliche sichtbare Bild verwendet haben.


4
2018-03-04 18:18



Es funktioniert in Google Chrome, wenn Sie ein wichtiges Attribut zum Hintergrundbild hinzufügen Achte darauf, dass du das Attribut zuerst hinzufügst und versuche es noch einmal, du kannst es so machen

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

}


0
2017-09-19 07:23