Come stampare forzatamente l’immagine di sfondo in HTML?

Ho bisogno di stampare la pagina del report che contiene un paio di immagini di sfondo. Ma solo queste immagini non sono stampabili. Queste immagini sono in realtà dei loghi per un grafico e quindi molto importanti nel rapporto.

Ho un’altra opzione che posso ritagliarli e includere nella pagina come tag, ma questa è l’ultima opzione. Quindi prima vorrei sapere se c’è un modo per stampare con forza queste immagini? Qualcuno può aiutarmi?

Per impostazione predefinita, un browser ignora le regole CSS di sfondo quando si stampa una pagina e non è ansible superarlo utilizzando css.

L’utente dovrà modificare le impostazioni del browser.

Pertanto, qualsiasi immagine che è necessario stampare deve essere visualizzata come immagine in linea anziché come sfondo css. Puoi usare css per visualizzare l’immagine in linea solo per la stampa. Qualcosa come questo.

HTML

Graph Description

CSS

 .graph-7{background: url(../img/graphs/https://stackoverflow.com/questions/11242991/how-to-forcefully-print-background-image-in-html/graph-7.jpg) no-repeat;} .graph-image img{display: none;} @media print{ .graph-image img{display:inline;} } 

Usando questo codice, o codice simile, significa che l’immagine viene usata una volta in html e una volta in css. La versione html è nascosta usando css e per la stampa viene visualizzata normalmente. Questo è un trucco, ma farà ciò che vuoi che faccia. Stamperà l’immagine.

Detto questo, quello che stai facendo è una pratica terribilmente ctriggers. Nulla che trasmetta informazioni significative all’utente dovrebbe essere comunicato usando solo CSS. Non solo è semanticamente scorretto, ma rende il grafico meno utile per gli utenti. Un’immagine in linea è molto meglio, e se puoi, è quello che dovresti usare.

sta funzionando in google chrome quando aggiungi! importante attributo all’immagine di sfondo assicurati di aver prima aggiunto l’attributo e riprova, puoi farlo come

 .class-name { background: url('your-image.png') !important; } 

inoltre puoi usare questi utili rotoli di stampa e metterli alla fine del file css

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