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

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?

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.

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

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*/
}

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.

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>

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

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

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.

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;  

}}

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;

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.

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"/>