it-swarm.com.de

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

Diese Frage wurde zuvor gestellt , aber die Lösung ist in meinem Fall nicht anwendbar. Ich möchte sicherstellen, dass bestimmte Hintergrundbilder gedruckt werden, da sie in die Seite integriert 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 von list-style-image vor. Diese Funktion funktioniert nur, wenn für jedes Symbol ein anderes Bild vorhanden ist und keine CSS-Sprites möglich sind.

Gibt es neben der Erstellung einer separaten Seite mit den Inline-Symbolen eine andere Lösung?

86
DisgruntledGoat

Sie haben sehr wenig Kontrolle über die Druckmethoden eines Browsers. Sie können höchstens SUGGEST vorschlagen. Wenn jedoch in den Druckeinstellungen des Browsers die Option "Hintergrundbilder nicht drucken" aktiviert ist, können Sie nichts tun, ohne Ihre Seite neu zu schreiben, um die Hintergrundbilder in schwebende "Vordergrundbilder" zu verwandeln, die sich hinter anderen Inhalten befinden.

45
Marc B

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

179
Marco Bettiolo

Ich habe einen Weg gefunden, das Hintergrundbild mit CSS zu drucken. Es hängt etwas davon ab, wie Ihr Hintergrund angelegt ist, aber es scheint für meine Anwendung zu funktionieren. 

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

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 als "Vordergrundbild" zum Hauptteil hinzugefügt, wodurch es gedruckt werden kann Möglicherweise müssen Sie zusätzliche CSS hinzufügen, um den z-index richtig zu machen. Aber auch hier hängt es von der Gestaltung Ihrer Seite ab.

Dies funktionierte für mich, wenn ich kein Kopfbild für die Druckansicht erhalten konnte.

68
ckpepper02

Browser haben standardmäßig die Option, Hintergrundfarben und Bilder zu drucken. 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*/
}
43
Kevin vd Bosch

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

Ich habe auch einige Rand- und Seitenorientierungssteuerungen 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>
12
Tarik

Stellen Sie sicher, dass Sie das wichtige Attribut verwenden. Dies erhöht die Wahrscheinlichkeit, dass Ihre Stile beim Drucken erhalten bleiben.

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

#example2 {
    background-color: #123456 !important;
}
7
nuts-n-beer

Wie @ ckpepper02 gesagt hat, funktioniert die Option body_inhalt: url gut. Ich habe jedoch herausgefunden, dass Sie, wenn Sie etwas modifizieren, einfach ein Header-Image mit dem Pseudoelement: vor wie folgt hinzufügen können.

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

Dadurch wird das Bild oben auf der Seite verrutscht, und von meinen eingeschränkten Tests aus funktioniert es in Chrome und IE9

-hanz

6
hanz

Verwenden Sie Pseudo-Elemente. Während viele Browser Hintergrundbilder ignorieren, handelt es sich bei Psuedo-Elementen, deren Inhalte auf ein Bild festgelegt sind, technisch NICHT um Hintergrundbilder. Sie können das Hintergrundbild dann ungefähr dort positionieren, wo das Bild hätte sein sollen (obwohl es nicht so einfach oder genau wie das Originalbild ist).

Ein Nachteil besteht darin, dass Sie dieses Verhalten außerhalb von Printmedien-Abfragen angeben müssen, damit dies in Chrome funktioniert, und dann im Druckmedien-Abfrageblock sichtbar wird. 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 der Seite häufig heruntergeladen wird, wodurch unnötige Volumen hinzugefügt werden. Sie können dies vermeiden, indem Sie dasselbe Bild/Pfad verwenden, das Sie bereits für das sichtbare Originalbild verwendet haben.

4
Dtipson

es funktioniert in Google Chrome, wenn Sie ein wichtiges Attribut zum Hintergrundbild hinzufügen. Stellen Sie sicher, dass Sie zuerst das Attribut hinzufügen und es erneut versuchen. Sie können es so machen

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

1
Hady El-Hady

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

 borderTop: solid 15px black;

und für Hintergrund mit Farbverlauf können Sie 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;
0
Victor Batista

https://Gist.github.com/danomanion/6175687 schlägt eine elegante Lösung unter Verwendung einer benutzerdefinierten Kugel anstelle eines Hintergrundbilds vor:

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

Indem Sie dies in ein

@media print {
}

block kann ich ein weiß-auf-transparentes Logo auf dem Bildschirm, das als Hintergrundbild gerendert wurde, durch ein schwarz-auf-transparentes Logo für den Druck ersetzen.

0
ms609