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


102

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 que se utilizan como sprites CSS).

Otra solución para la misma pregunta sugiere usar list-style-image, que solo funciona si tiene una imagen diferente para cada ícono, no es posible utilizar sprites CSS.

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

Respuestas:


51

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 tiene "no imprimir imágenes de fondo", no hay nada que pueda hacer sin reescribir 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.


210

Con Chrome y Safari, puede agregar el estilo CSS -webkit-print-color-adjust: exact;al elemento para forzar la impresión del color de fondo y / o la imagen


4
Esto es asombroso. Hace la vida mucho más fácil para los usuarios de phantomjs / webkit
Jason

1
@MuneemHabib No funciona en IE, de hecho, el único navegador compatible es Chrome: developer.mozilla.org/en-US/docs/Web/CSS/…
Marco Bettiolo

eso hizo el truco para Chrome ... afortunadamente en este caso solo necesitaba soportar wekkit ...
Davy

2
@DisgruntledGoat debería actualizar esta para que sea la respuesta correcta, ya que resolvió rápidamente mi problema (mi proyecto en el trabajo solo se enfoca en Chrome). Obviamente, no funciona para todos los navegadores, pero debería conocerse desde el principio, independientemente.
Brett84c

1
@ Brett84c: No estoy de acuerdo ya que es una solución de un solo navegador.
Kukeltje

84

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

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

ya funciona bien, pero Mozilla marca como no estándar Esta característica no es estándar y no está en una pista de estándares. No lo use en sitios de producción frente a la Web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre las implementaciones y el comportamiento puede cambiar en el futuro.
Qh0stM4N

3
¿Por qué es !importantnecesario?

¡Trabajó para mi! Gracias.
Nick Woodhams

color-adjustLamentablemente, FireFox no admite correctamente. Parece aplicarse solo al fondo, no a la colorpropiedad css. Se informa como un error , sin mucha actividad ni votos. Mantener el fondo es bastante inútil si no se conserva el color de la fuente, lo que hace que sea ilegible.
Frédéric

Es una buena solucion. Solo tenga en cuenta que no funciona con IE11 (¡lo sé!).
Rafael S. Fijalkowski

76

Encontré una forma de imprimir la imagen de fondo con CSS. Depende un poco de cómo se distribuyan sus antecedentes, pero parece funcionar para mi aplicación.

Esencialmente, agrega @media printal final de su hoja de estilo y cambia 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", haciéndola imprimible. Es posible que deba agregar algo de CSS adicional para hacer el z-indexarchivo. Pero, de nuevo, depende de cómo se distribuya la página.

Esto funcionó para mí cuando no pude hacer que una imagen de encabezado se mostrara en la vista de impresión.


3
Esta fue una solución increíble para lo que tenía que hacer, que era cambiar un inline <img>(para RWD) con uno diferente para @media print. La imagen web estaba sobre un fondo oscuro, por lo que imprimir esa imagen no funcionó en papel blanco y no quería obligar a los usuarios a imprimir un fondo oscuro en el encabezado. ¡Perfecto!
JHogue

@JHogue - ¡Gracias! Me alegro de que te haya ayudado.
ckpepper02

4
Si bien esta no es una respuesta "correcta". Es MUCHO más útil que la respuesta aceptada.
Xenology

a continuación, la respuesta stackoverflow.com/a/15208258/915865 debe estar marcada ya que tiene una mejor explicación, en mi humilde opinión
Kat Lim Ruiz

1
En Firefox, solo funcionó si usaba contenido en el interior: antes, como @ hanz answer
vaskort

18

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

También agregué algunos controles de orientación de margen y página (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>

9

Asegúrese de utilizar 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;
}

Creé algunos informes sencillos "fáciles de imprimir" para mi empresa utilizando este método. Funciona en OS X Chrome / Safari y Windows 8 Chrome / IE (no he probado ninguna otra plataforma).
nuts-n-beer

3
Esto parece no tener ningún efecto en Chrome, Firefox y Safari en Mac.
intcreator

Esto es justo lo que necesitaba para aplicar el atributo a cada uso de ese elemento en particular y permitirme imprimir el documento de manera apropiada. ¡Gracias!
johnny

7

Como dijo @ ckpepper02, la opción body content: url funciona bien. Sin embargo, descubrí que si lo modifica ligeramente, puede usarlo para agregar una imagen de encabezado de tipo 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, según mis pruebas limitadas, funciona en Chrome e IE9.

-hanz


5

Utilice psuedo-elementos. Si bien muchos navegadores ignorarán las imágenes de fondo, los psuedo-elementos con su contenido establecido en una imagen NO son técnicamente imágenes de fondo. A continuación, puede colocar la imagen de fondo aproximadamente donde debería haber ido la imagen (aunque no es tan fácil ni tan preciso como la imagen original).

Un inconveniente 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 consultas de medios impresos. 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ágina normales, lo que agrega volumen innecesario. Puede evitarlo simplemente usando la misma imagen / ruta que ya usó para la imagen visible original.


1

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

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

}


Buen punto para mencionar, resolvió mi problema junto con -webkit-print-color-adjust: exact! important;
czmarc

0

Puede utilizar bordes para colores fijos.

 borderTop: solid 15px black;

y para el fondo degradado puedes usar:

    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;

0

https://gist.github.com/danomanion/6175687 propone una solución elegante, utilizando una viñeta personalizada en lugar de una imagen de fondo:

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

Incluyendo esto dentro de un

@media print {
}

bloque, puedo reemplazar un logotipo blanco sobre transparente en la pantalla, renderizado como una imagen de fondo, con un logotipo negro sobre transparente para imprimir.


Esta es una buena solución, pero realmente no funciona si la imagen de fondo es mucho más grande que el contenedor. (extiende mi div contenedor)
Jabbamonkey

-1

Puedes hacer algunos trucos como ese:

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

En la etiqueta del cuerpo:

<img src="YOUR IMAGE URL" class="whater"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.