Cómo imprimir con fuerza imágenes de fondo en HTML?

Question

Necesito imprimir la página del informe que tiene un par de imágenes de fondo. Pero solo estas imágenes no son imprimibles. Estas imágenes son logotipos en realidad para el gráfico y, por lo tanto, muy importantes en el informe.

Tengo otra opción que puedo recortar e incluir en la página como etiqueta, pero esta es la última opción. Por lo tanto, antes de eso, me gustaría saber si hay alguna forma de imprimir estas imágenes por la fuerza. ¿Alguien puede ayudarme?

Answer 1

De forma predeterminada, un navegador ignorará las reglas de fondo de CSS al imprimir una página, y usted no puede superar esto usando css.

El usuario tendrá que cambiar la configuración de su navegador.

Por lo tanto, cualquier imagen que necesite imprimir se debe representar como una imagen en línea en lugar de como fondo de fondo. Sin embargo, puede usar css para mostrar la imagen en línea solo para imprimir. Algo como esto.

HTML

<div class"graph-image graph-7"> 
    <img src="graph-7.jpg" alt="Graph Description" /> 
</div> 

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;} 
.graph-image img{display: none;} 

@media print{ 
    .graph-image img{display:inline;} 
} 

El uso de este código o código similar, significa que la imagen se utiliza una vez en html y una vez en css. La versión html está oculta mediante css, y para imprimir se muestra de forma normal. Esto es un truco, pero hará lo que quieras que haga. Imprimirá la imagen.

Habiendo dicho eso, lo que estás haciendo es terriblemente mala práctica. Nada que transmita información significativa al usuario debe transmitirse usando CSS solo. No solo es semánticamente incorrecto, sino que hace que el gráfico sea menos útil para los usuarios. Una imagen en línea es mucho mejor, y si puede, eso es lo que debe usar.

Answer 2

se trabaja en Google Chrome cuando se agrega! Importante atributo de imagen de fondo para asegurarse de que Agregar atributo primera y vuelve a intentarlo, puede hacerlo como tha

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

También puede utilizar estas rodillo de impresión útil y ponerlo al final del archivo css

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