Come posso forzare i browser a stampare immagini di sfondo in CSS?

Questa domanda è stata posta in precedenza, ma la soluzione non è applicabile nel mio caso. Voglio assicurarmi che alcune immagini di sfondo vengano stampate perché sono parte integrante della pagina. (Non sono immagini direttamente nella pagina perché ce ne sono molte utilizzate come sprite CSS.)

Un'altra soluzione alla stessa domanda suggerisce di utilizzare list-style-image, che funziona solo se hai un'immagine diversa per ogni icona, non sono possibili sprite CSS.

Oltre a creare una pagina separata con le icone in linea, esiste un'altra soluzione?

Hai pochissimo controllo sui metodi di stampa di un browser. Al massimo puoi SUGGERIRE, ma se le impostazioni di stampa del browser hanno "non stampare immagini di sfondo", non c'è niente che puoi fare senza riscrivere la tua pagina per trasformare le immagini di sfondo in immagini fluttuanti "in primo piano" che si trovano dietro altri contenuti.

Con Chrome e Safari puoi aggiungere lo stile CSS -webkit-print-color-adjust: exact;all'elemento per forzare la stampa del colore di sfondo e / o dell'immagine

I browser, per impostazione predefinita, hanno la loro opzione per stampare i colori di sfondo e le immagini disattivate. Puoi aggiungere alcune righe in CSS per aggirare questo problema. Basta aggiungere:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

Ho trovato un modo per stampare l'immagine di sfondo con CSS. Dipende un po 'da come è strutturato il tuo background, ma sembra funzionare per la mia applicazione.

In sostanza, aggiungi il @media printalla fine del tuo foglio di stile e modifichi leggermente lo sfondo del corpo.

Esempio, se il tuo attuale CSS ha questo aspetto:

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

Alla fine del foglio di stile, aggiungi:

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

Ciò aggiunge l'immagine al corpo come un'immagine "in primo piano", rendendola quindi stampabile. Potrebbe essere necessario aggiungere alcuni CSS aggiuntivi per fare il z-indexcorretto. Ma ancora una volta, dipende da come è strutturata la tua pagina.

Questo ha funzionato per me quando non riuscivo a visualizzare un'immagine di intestazione nella visualizzazione di stampa.

Il codice seguente funziona bene per me (almeno per Chrome).

Ho anche aggiunto alcuni controlli per il margine e l'orientamento della pagina (verticale, orizzontale).

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

Assicurati di utilizzare l'attributo! Important. Ciò aumenta notevolmente la probabilità che i tuoi stili vengano mantenuti una volta stampati.

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

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

Come ha detto @ ckpepper02, l'opzione body content: url funziona bene. Ho scoperto tuttavia che se lo modifichi leggermente puoi semplicemente usarlo per aggiungere un'immagine di intestazione di sorta usando lo pseudo elemento: before come segue.

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

Ciò farà scorrere l'immagine nella parte superiore della pagina e, dai miei test limitati, funziona su Chrome e IE9

-hanz

Usa gli psuedo-elementi. Mentre molti browser ignorano le immagini di sfondo, gli psuedo-elementi con il loro contenuto impostato su un'immagine NON sono tecnicamente immagini di sfondo. È quindi possibile posizionare l'immagine di sfondo all'incirca dove avrebbe dovuto essere l'immagine (anche se non è così facile o preciso come l'immagine originale).

Uno svantaggio è che, affinché funzioni in Chrome, è necessario specificare questo comportamento al di fuori della query dei supporti di stampa e quindi renderlo visibile nel blocco delle query dei supporti di stampa. Quindi, qualcosa del genere ...

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

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

Lo svantaggio è che l'immagine verrà spesso scaricata durante i normali caricamenti della pagina, aggiungendo un volume non necessario. Puoi evitarlo semplicemente usando la stessa immagine / percorso che avevi già utilizzato per l'immagine visibile originale.

funziona in Google Chrome quando aggiungi! attributo importante all'immagine di sfondo assicurati di aggiungere prima l'attributo e riprova, puoi farlo in questo modo

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

}

Puoi usare i bordi per colori fissi.

 borderTop: solid 15px black;

e per lo sfondo sfumato puoi usare:

    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 propone una soluzione elegante, utilizzando un punto elenco personalizzato al posto di un'immagine di sfondo:

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

Includendo questo in un file

@media print {
}

blocco, sono in grado di sostituire un logo bianco su trasparente sullo schermo, reso come immagine di sfondo, con un logo nero su trasparente per la stampa.

Puoi fare alcuni trucchi del genere:

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

Nel tag del corpo:

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