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

176

Soy nuevo aquí en esta compañía y tenemos un producto que utiliza millas de CSS. Estoy intentando hacer una hoja de estilo imprimible para nuestra aplicación, pero estoy teniendo problemas con background-coloren @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 y demás, pero background-colorno se verán en la impresión. Ahora entiendo que es posible que no puedan responder a mi pregunta sin más detalles. Tenía curiosidad por saber si alguien tenía este problema, o algo similar, antes.

css  media-queries 
— Weston Watson
fuente
Bueno, pasa el Validador CSS W3C ( jigsaw.w3.org/css-validator ). Eso es raro
— GôTô
Esto ya no debería ser un problema. Llegué a este problema porque tenía una página bootstrap y bootstrap tiene una @media printconsulta que elimina los colores de fondo de las tablas (por ejemplo, rayas).
— Martin Thoma
@MartinThoma ¿Cómo solucionó el problema? ¿Eliminaste el CSS de la plantilla boostrap?
— EduLopez

Respuestas:

242

SI un usuario tiene "Imprimir colores e imágenes de fondo" desactivado en su configuración 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 para que imprima los colores de fondo y las 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, se encuentra en la pestaña Configuración de página -> [Formato y opciones] en Opciones.

— Ryan Ternier
fuente
10
genial, me has ahorrado horas de estallar mi cerebro sobre este CSS.
— Weston Watson
162
Con Chrome y Safari puedes agregar el estilo css "-webkit-print-color-ajustar: exacto;" al elemento para forzar la impresión del color de fondo y / o imagen
— Marco Bettiolo
11
@MarcoBettiolo no parece funcionar en las últimas compilaciones de webkit, pero importante sí lo hace
— Hedde van der Heide
2
Agregar! Importante a la regla también lo resolvió para mí.
— Thiago Duarte
14
Para ampliar esto, agregué ajuste de color: exacto; para que FF funcione. Así que mi código completo es*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
— BitBug
252

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

body {
  -webkit-print-color-adjust: exact !important;
}
— drolex
fuente
77
Esto parece haber resuelto mi problema con la impresión de una tabla con colores de fila alternativos.
— Victor J. Garcia
Asegúrese de utilizar la carcasa correcta en la ruta de la imagen, ya que el cuadro de diálogo de impresión de Chrome no carga las imágenes en el primer intento. Esto solo sucede en el caso de que la URL de su propiedad de imagen de fondo no coincida con la carcasa del nombre de la carpeta física. (Informado en la versión 48.0.2564.109 m)
— MPaul
3
¿Cuál es la alternativa en Firefox e IE
— Shan Khan
55
Una nota para futuros viajeros en el tiempo: es posible que desee utilizar color-adjusten su lugar.
— Константин Ван
@ КонстантинВан no es compatible con Chrome a partir de abril de 2019. Esta es la documentación de Firefox.
— Thomas
82

Entendido:

CSS: 

box-shadow: inset 0 0 0 1000px gold;

Funciona para todas las cajas, incluidas las celdas de la tabla.

  • (Si se cree el archivo de salida de la impresora PDF ...?)
  • Solo probado en Chrome + Firefox en Ubuntu ...
— T4NK3R
fuente
55
Puede agregar compatibilidad con IE8 e IE9 con -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ Si desea que sus imágenes de sprite sean visibles, use la técnica img / clip css-tricks.com/css-sprites-with-inline-images , que le dará imágenes en IE9 y FF ( aunque no IE8)
— emik
2
Funciona muy bien en navegadores normales, pero no en IE, incluso con la sugerencia de @evami.
— woz 01 de
@woz Lo tengo funcionando en un proyecto con IE8 / 9. El gradiente (al igual que box-shadow) agrega un elemento de fondo adicional que no se elimina mediante el reinicio forzado del navegador. te importaría compartir tu css?
— emik
2
Esto no parece funcionar con el último Chrome (60).
— swervo
1
Esto me falla en Chrome. Estoy usando 69. Eso sugiere que se ha roto al menos desde 60 (según el comentario de @ swervo).
— iconoclasta
34

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

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>
— MAXE
fuente
22

-webkit-print-color-adjust: exact; solois Not enough tienes que usar !importantcon el atributo

Esta es la vista previa de impresión en Chrome después de agregar !importanta cada uno background-colorycolor agregué cada etiqueta

Vista previa de impresión en cromo

y esta es la vista previa de impresión en Chrome antes de agregar!important

ingrese la descripción de la imagen aquí

ahora, para saber cómo inject !importantdividir el estilo, mira esta respuesta No puedo inyectar un estilo con una regla "! importante"

— Basheer AL-MOMANI
fuente
Tal vez sea porque ya tiene una hoja de estilo @print que restablece el color de fondo.
— Niccolo M.
¡DIOS MIO! está funcionando pero ¿cómo funciona? Puede usted explicar por favor.
— rahim.nagori
1
Esa es la única solución que funcionó para mí hasta ahora. <div style = "- webkit-print-color-ajustar: exacto! importante; color de fondo: rojo! importante;"> ... </div>
— Thomas
10

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

  1. ! importante en los trabajos regulares de declaración de CSS (ni siquiera en la impresión @media)
  2. Use svg
— yar1
fuente
66
! importante resuelve el problema en todos los navegadores modernos, siempre y cuando "Imprimir colores e imágenes de fondo" esté habilitado.
— Chris Hynes
2
! important también funciona sin intervención del usuario si lo usa junto con body {-webkit-print-color-ajustar: exacto; } (según el comentario anterior)
— yar1
2
He descubierto que si uso color-adjusto la variante webkit, de hecho no necesito la regla importante.
— Kasapo
7

Si está buscando crear páginas "para imprimir", le recomiendo agregar "! Important" a su CSS de impresión @media. Esto alienta 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;
— nueces-n-cerveza
fuente
6

Hay otro truco que puede hacer sin activar la opción de borde de impresión mencionada en otras publicaciones. Como se imprimen los bordes , 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:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

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

Tenga en cuenta que este truco no funcionará en elementos que no sean display: block;o display: table-cell;, por ejemplo, <table class="your-background">y<tr class="your-background"> no funcionará.

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

— núcleo
fuente
1
es un truco loco, pero al menos fuerza alguna forma de color de fondo independientemente de la configuración de impresión. genial, gracias.
— Brad Zacher
6

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

Dentro de la etiqueta del cuerpo,

<body style="-webkit-print-color-adjust: exact;"> </body>

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

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
— Aamir Shaikh
fuente
5

A pesar de que el !importantuso generalmente está mal visto, este es el código ofensivo en el bootstrap.cssque evita que se impriman las filas de la tabla background-color.

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

Supongamos que está tratando de diseñar el siguiente HTML:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

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.

— El Aelfinn
fuente
Después de horas de búsqueda, encontré esta respuesta. Entré y eliminé las líneas de Bootstrap.css y WHAM! ¡Colores en el fondo imprimible!
— Mighty Ferengi
1
¡Gracias! Finalmente, esta es la respuesta que me puso en funcionamiento, pero necesitaba agregar: body {-webkit-print-color-ajustar: ¡exacto! Importante; }
— Ocean Airdrop
3

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

Las soluciones -webkit-print-color-adjust:exact;y !important, por supuesto, no funcionaron, pero lo box-shadow: inset 0 0 0 1000px gold;hicieron ... gran truco, muchas gracias :)

— logol
fuente
2

Pensé que agregaría una ayuda reciente y relevante de 2015 de una experiencia css impresa reciente.

Pude 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 ! Important & -webkit-print-color-ajustar: exacto! Important para que el fondo y los colores se impriman correctamente.

Además, al declarar los colores, descubrí que las áreas más rebeldes necesitaban una definición directamente a su objetivo. Por ejemplo:

<div class="foo">
 <p class="red">Some text</p>
</div>

Y tu CSS:

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

Probado y funcionando sobre Chrome, Firefox, Opera y Edge para 2016/10. Debería funcionar en cualquier navegador y siempre debería verse como se esperaba.

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

Aquí hay una página HTML imprimible completa para bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>
— Heroselohim
fuente
1

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

— alano
fuente
1

En algunos casos (bloques sin contenido, pero con fondo) se puede anular utilizando 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;
  }
}
— Gedeon
fuente
0

Si no le importa usar una imagen en lugar de un color de fondo (o posiblemente una imagen con su color de fondo), la solución a continuación me ha funcionado en Firefox, Chrome e incluso IE sin anulaciones. Establezca la imagen en algún lugar de la página y escóndela hasta que el usuario imprima.

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

<img src="someImage.png" class="background-print-img">

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

}

— ksealey
fuente
Adopté tu enfoque e intenté que funcionara en IE11, pero lamentablemente no funcionó. Eso fue hasta que puse un !importantvalor en cada atributo en mi clase que luego lo hizo funcionar.
— Sal Alturaigi
0 
tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

Funciona en Chrome y Edge

— Vasily Ivanov
fuente
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.