Pregunta ¿Cómo puedo obligar a los navegadores a imprimir imágenes de fondo en CSS?


Esta pregunta fue preguntado 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 utilizadas como sprites CSS).

Otra solución sobre la misma pregunta sugiere usar list-style-image, que solo funciona si tienes una imagen diferente para cada icono, no hay sprites de CSS posibles.

Además de crear una página separada con los iconos en línea, ¿hay alguna otra solución?


75
2017-07-12 19:48


origen


Respuestas:


Usted tiene muy poco control sobre los métodos de impresión de un navegador. Como máximo puede SUGERIR, pero si la configuración de impresión del navegador "no imprime imágenes de fondo", no hay nada que pueda hacer sin volver a escribir su página para convertir las imágenes de fondo en imágenes flotantes de "primer plano" que estén detrás de otro contenido.


43
2017-07-12 19:51



Con Chrome y Safari puedes agregar el estilo CSS -webkit-print-color-adjust: exact; al elemento para forzar imprimir el color de fondo y / o la imagen


166
2018-01-16 11:12



Encontré una manera de imprimir la imagen de fondo con CSS. Es un poco dependiente de cómo se presenta su fondo, pero parece funcionar para mi aplicación.

Esencialmente, agregas el @media print hasta el final de su hoja de estilo y cambie ligeramente el fondo del cuerpo.

Ejemplo, si su CSS actual tiene este aspecto:

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

Al final de tu hoja de estilo, agregas:

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

Esto agrega la imagen al cuerpo como una imagen de "primer plano", por lo que es imprimible. Es posible que necesite agregar algún CSS adicional para hacer z-index apropiado. Pero, de nuevo, depende de cómo se presenta su página.

Esto funcionó para mí cuando no pude obtener una imagen de encabezado para mostrar en la vista de impresión.


63
2017-09-26 23:25



Los navegadores, de forma predeterminada, tienen la opción de imprimir colores de fondo e imágenes desactivadas. Puede agregar algunas líneas en CSS para omitir esto. Solo agrega:

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

26
2017-07-04 14:03



El siguiente código funciona bien para mí (al menos para Chrome).

También agregué algunos controles de orientación de página y margen. (Retrato, paisaje)

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

8
2017-12-11 22:55



Como dijo @ ckpepper02, la opción de contenido corporal: url funciona bien. Sin embargo, encontré que si lo modifica ligeramente, puede usarlo para agregar un tipo de imagen de encabezado usando el pseudo elemento: before de la siguiente manera.

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

Eso deslizará la imagen en la parte superior de la página y, a partir de mis pruebas limitadas, funcionará en Chrome y en IE9.

-hanz


6
2017-11-26 15:44



Asegúrese de usar el atributo! Important. Esto aumenta drásticamente la probabilidad de que sus estilos se conserven cuando se imprimen.

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

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

6
2018-04-25 00:09



Use psuedo-elements. Si bien muchos navegadores ignoran las imágenes de fondo, los elementos psuedo con su contenido configurado en una imagen técnicamente NO son imágenes de fondo. A continuación, puede colocar la imagen de fondo aproximadamente donde debería haberse ido la imagen (aunque no es tan fácil o precisa como la imagen original).

Una desventaja es que para que esto funcione en Chrome, debe especificar este comportamiento fuera de su consulta de medios impresos y luego hacerlo visible en el bloque de consulta de medios de impresión. Entonces, algo como esto ...

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

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

El inconveniente es que la imagen a menudo se descargará en cargas de páginas normales, lo que agrega volumen innecesario. Puede evitar eso simplemente usando la misma imagen / ruta que ya había utilizado para la imagen original y visible.


4
2018-03-04 18:18



está funcionando en google chrome cuando agrega un atributo importante a la imagen de fondo asegúrese de agregar primero el atributo y vuelva a intentarlo, puede hacerlo así

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

}


0
2017-09-19 07:23