Problemas de impresión de CSS @media con color de fondo;

Soy nuevo aquí en esta empresa y tenemos un producto que usa millas de CSS. Estoy intentando hacer una hoja de estilos imprimible para nuestra aplicación, pero tengo problemas con el color de fondo en @media print …

@media print { #header{display:none;} #adwrapper{display:none;} td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}} 

todo lo demás funciona, puedo modificar los bordes, pero el color de fondo no aparecerá en la impresión. Ahora entiendo que es posible que no puedan responder mi pregunta sin más detalles, solo tenía curiosidad por saber si alguien tuvo este problema o algo similar antes.

Si un usuario tiene “Imprimir colores e imágenes de fondo” desactivados en sus configuraciones de impresión, ningún CSS lo anulará, así que siempre tenga en cuenta eso. Esta es una configuración predeterminada .

Una vez que esté configurado, imprimirá colores de fondo e imágenes, lo que tenga allí funcionará.

Se encuentra en diferentes puntos. En IE9beta se encuentra en Imprimir-> Opciones de página en Opciones de papel

En Firefox está en Configuración de página -> pestaña [Formato y opciones] en Opciones.

Para habilitar la impresión en segundo plano en Chrome:

 body { -webkit-print-color-adjust: exact !important; } 

GOT iT – incluso si la pregunta fue “cerrada” hace años:)
CSS: caja-sombra: recuadro 0 0 0 1000px oro;
Funciona para todas las cajas, ¡incluidas las celdas de la mesa!
(Si se debe creer en el archivo de salida de la impresora PDF …)
– Solo probado en Chrome + Firefox en Ubuntu …

Prueba esto, funcionó para mí en Google Chrome:

  

-webkit-print-color-adjust: exact; solo is Not enough , tienes que usar !important con el atributo

esto es imprimir la vista previa en cromo después de que agregué !important para cada background-color y color en cada etiqueta

impresión de vista previa en cromo

¡y esto es una vista previa de impresión en cromo antes de agregar !important

enter image description here

ahora, para saber cómo inject !important para el estilo de div, mira esta respuesta. No puedo inyectar un estilo con una regla “! important”

Dos soluciones que funcionan (al menos en Chrome moderna) no han probado más allá:

  1. ! right importante en los trabajos de statement css regulares (ni siquiera en @media print)
  2. Usar svg

Si está buscando crear páginas “compatibles con las impresoras”, le recomiendo que agregue “! Important” a su @media print CSS. Esto anima a la mayoría de los navegadores a imprimir sus imágenes de fondo, colores, etc.

EJEMPLOS:

 background:#3F6CAF url('example.png') no-repeat top left !important; background-color: #3F6CAF !important; 

Para Chrome, he usado algo como esto y funcionó para mí.

Dentro de la etiqueta corporal,

   

O para un elemento en particular, digamos si tiene una tabla y desea llenar una td, es decir, una celda,

 

Hay otro truco que puede hacer sin activar la opción de borde de impresión mencionado en otras publicaciones. Como las fronteras están impresas, puede simular colores de fondo sólidos con este truco:

 .your-background:before { content: ''; display: block; position: absolute; top: 0; right: 0; left: 0; z-index: -1; border-bottom: 1000px solid #eee; /* Make it fit your needs */ } 

Actívelo agregando la clase a su elemento:

 
     

Aunque esto necesita un código adicional y un cuidado adicional para hacer que los colores de fondo sean visibles, todavía es la única solución que conozco.

Observe que este truco no funcionará en elementos que no sean display: block; o display: table-cell; , por ejemplo,

y

no funcionarán.

Usamos esto para obtener colores de fondo en todos los navegadores (aún, se requiere IE9 +).

Pensé en agregar una ayuda reciente y relevante de 2015 de una experiencia reciente de impresión de CSS.

Pudo imprimir fondos y colores independientemente de la configuración del cuadro de diálogo de impresión.

Para hacer esto, tuve que usar una combinación de ! Importante & -webkit-print-color-adjust: ¡exacto! Importante para que el fondo y los colores se impriman correctamente.

Además, al declarar colores, encontré que las áreas más difíciles necesitaban una definición directamente para su objective. Por ejemplo:

 

Some text

Y tu CSS:

 .red {color:red !important} .foo {color:red !important} /* <-- This won't always paint the p */ 

Encontré este problema, porque tuve un problema similar cuando traté de generar un PDF a partir de una salida html en Google Apps Script donde los colores de fondo tampoco se “imprimen”.

El -webkit-print-color-adjust:exact; y !important soluciones !important , por supuesto, no funcionó, pero la box-shadow: inset 0 0 0 1000px gold; hizo … gran truco, muchas gracias 🙂

La mejor “solución” que he encontrado es proporcionar un destacado botón o enlace “Imprimir” que muestra un pequeño cuadro de diálogo que explica audazmente, breve y concisamente, que necesitan ajustar la configuración de la impresora (con una instrucción de punto de viñeta ABC 123) para habilitar el fondo e impresión de imágenes. Esto ha sido muy exitoso para mí.

En algunos casos (bloques sin contenido, pero con fondo) se puede anular usando bordes, individualmente para cada bloque.

Por ejemplo:

 .colored { background: #000; border: 1px solid #ccc; width: 8px; height: 8px; } @media print { .colored div { border: 4px solid #000; width: 0; height: 0; } } 

Probado y trabajando en Chrome, Firefox, Opera y Edge para 2016/10. Debe funcionar en cualquier navegador y siempre debe verse como se espera.

Ok, hice un pequeño experimento de navegador cruzado para imprimir colores de fondo. ¡Solo copia, pega y disfruta!

Aquí se trata de una página HTML imprimible para bootstrap:

          

Hey... this works !

Ohh... this works recursive too !!

Any size !!

Some content...

A pesar de que el uso !important generalmente está mal visto, este es el código ofensivo en bootstrap.css que impide que las filas de la tabla se impriman con background-color .

 .table td, .table th { background-color: #fff !important; } 

Supongamos que está intentando diseñar el siguiente HTML:

 
Name School Height Weight

Para anular este CSS, coloque la siguiente regla (más específica) en su hoja de estilo:

 @media print { table tr.highlighted > td { background-color: rgba(247, 202, 24, 0.3) !important; } } 

Esto funciona porque la regla es más específica que el valor predeterminado de arranque.

Puede usar el canvas la etiqueta y “dibujar” el fondo, que funciona en IE9, Gecko y Webkit.

Si no te importa usar una imagen en lugar de un color de fondo (o posiblemente una imagen con el color de fondo), la siguiente solución me ha funcionado en Firefox, Chrome e incluso IE sin ningún tipo de sobrepaso. Establezca la imagen en algún lugar de la página y escóndala hasta que el usuario imprima.

El html en la página con la imagen de fondo

  

El Css

 .background-print-img{ display: none; } @media print{ .background-print-img{ background:red; display: block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-10; } 

}