¿Cómo puedo obligar a los navegadores a imprimir imágenes de fondo en CSS?
Esta pregunta se hizo antes pero la solución no es aplicable en mi caso. Quiero asegurarme de que se impriman ciertas imágenes de fondo porque son parte integral de la página. (No son imágenes directamente en la página porque hay varias de ellas que se utilizan como sprites CSS).
Otra solución a esa misma pregunta sugiere usar list-style-image, que solo funciona si tiene una imagen diferente para cada ícono, no es posible utilizar sprites CSS.
Además de crear una página separada con los íconos en línea, ¿existe otra solución?
Con Chrome y Safari puedes agregar el estilo CSS -webkit-print-color-adjust: exact;al elemento para forzar la impresión del color de fondo y/o la imagen.
background-colorLos navegadores, de forma predeterminada, tienen desactivada la opción de imprimir mensajes de texto e imágenes. Puedes agregar algunas líneas en CSS para evitar esto. Solo agrega:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
Encontré una manera de imprimir la imagen de fondo con CSS. Depende un poco de cómo se presenten sus antecedentes, pero parece funcionar para mi aplicación.
Básicamente, agregas el @media printal final de tu hoja de estilo y cambias ligeramente el fondo del cuerpo.
Ejemplo, si su CSS actual se ve así:
body {
background:url(images/mybg.png) no-repeat;
}
Al final de su hoja de estilo, agrega:
@media print {
body {
content:url(images/mybg.png);
}
}
Esto agrega la imagen al cuerpo como una imagen de "primer plano", lo que la hace imprimible. Es posible que deba agregar algo de CSS adicional para que sea z-indexcorrecto. Pero nuevamente, depende de cómo esté diseñada tu página.
Esto funcionó para mí cuando no podía hacer que apareciera una imagen de encabezado en la vista de impresión.
