Color de fondo que no se muestra en la vista previa de impresión

Estoy tratando de imprimir una página. En esa página le he dado a la mesa un color de fondo. Cuando veo la vista previa de impresión en cromo, no toma la propiedad de color de fondo …

Así que probé esta propiedad:

-webkit-print-color-adjust: exact; 

pero aún no muestra el color.

http://jsfiddle.net/TbrtD/

 .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } 
Date PO Number Term Tax Quote Number Status Account Mgr Shipping Method Shipping Account QA Reference End-User Name End-User's PO Tracking Number
22 20130000 Jim B. 22 510 xxx yyyy zznn@abc.co PDF 12/23/2012 Approved PDF 12/23/2012 Approved

La propiedad CSS de Chrome -webkit-print-color-adjust: exact; funciona apropiadamente

Sin embargo, asegurarse de tener el CSS correcto para imprimir a menudo puede ser complicado. Se pueden hacer varias cosas para evitar las dificultades que tiene. Primero, separe todo su CSS impreso de su CSS de pantalla. Esto se hace a través de la @media screen @media print y @media screen .

Muchas veces simplemente configurar un CSS de @media print no es suficiente porque todavía tienes todos tus otros CSS incluidos cuando imprimes también. En estos casos, solo debe tener en cuenta la especificidad de CSS ya que las reglas de impresión no ganan automáticamente contra las reglas de CSS no impresas.

En su caso, el -webkit-print-color-adjust: exact está funcionando. Sin embargo, sus definiciones de color de background-color y color están siendo superadas por otros CSS con mayor especificidad.

Si bien no recomiendo usar !important en casi cualquier circunstancia, las siguientes definiciones funcionan correctamente y exponen el problema:

 @media print { tr.vendorListHeading { background-color: #1a4567 !important; -webkit-print-color-adjust: exact; } } @media print { .vendorListHeading th { color: white !important; } } 

Aquí está el violín (e incrustado para facilitar la vista previa de impresión).

Esa propiedad de CSS es todo lo que necesitas, eso me funciona … Al previsualizar en Chrome, tienes la opción de verlo en BW y Color ( Color: Opciones – Color o Blanco y negro ), así que si no tienes esa opción, entonces Te sugiero que tomes esta extensión de Chrome y te haga la vida más fácil:

https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en

El sitio que agregaste en el violín necesita esto en tu css de impresión de medios (solo tienes que agregarlo …

medios de impresión CSS en el cuerpo:

 @media print { body {-webkit-print-color-adjust: exact;} } 

ACTUALIZA BIEN para que tu problema sea bootstrap.css … tiene un css de impresión de medios así como lo haces … lo eliminas y eso debería darte color … debes hacer lo tuyo o mantenerte bootstraps print css.

Cuando hago clic en Imprimir, veo color … http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/

Solo necesitaba agregar el atributo !important a la etiqueta background-color para que se mostrara, no necesitaba la parte webkit:

background-color: #f5f5f5 !important;

Chrome no mostrará el color de fondo, o varios otros estilos, al imprimir si la configuración de gráficos de fondo está desactivada.

Esto no tiene nada que ver con css, @media o especificidad. Probablemente puedas abrir el camino, pero la forma más fácil de obtener que Chrome muestre el color de fondo y otros gráficos es marcar correctamente esta casilla en Más configuraciones.

enter image description here

Si está utilizando bootstrap o cualquier otro CSS de terceros, asegúrese de especificar la pantalla multimedia solo en él, para que tenga el control del tipo de medio impreso en sus propios archivos CSS:

  

Use lo siguiente en su hoja de estilo de impresión @media.

 h1 { background-color:#404040; background-image:url("img/404040.png"); background-repeat:repeat; box-shadow: inset 0 0 0 1000px #404040; border:30px solid #404040; height:0; width:100%; color:#FFFFFF !important; margin:0 -20px; line-height:0px; } 

Aquí hay un par de cosas para tener en cuenta:

  • el color de fondo es el repliegue absoluto y está ahí principalmente para la posteridad.
  • background-image usa un pixel de 1px x 1px de # 404040 hecho en un PNG. Si el usuario tiene imágenes habilitadas, puede funcionar, si no …
  • Establezca la sombra de cuadro, si eso no funciona …
  • Borde = 1/2 de la altura deseada y / o ancho de la caja, sólido, color. En el ejemplo anterior, quería un cuadro de altura de 60px.
  • Ponga a cero el alto / ancho dependiendo de lo que controle en el atributo de borde.
  • El color de la fuente quedará predeterminado en negro a menos que use!
  • Establezca la altura de la línea en 0 para corregir que la caja no tenga una dimensión física.
  • Crea y aloja tus propios PNG 🙂
  • Si el texto en el bloque necesita envolverse, colócalo en un div y coloca el div usando la posición: relative; y eliminar la altura de la línea.

Vea mi violín para una demostración más detallada.

¿Estás seguro de que esto es un problema de CSS? Hay algunas publicaciones en Google sobre este problema: http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s

Puede estar relacionado con el proceso de impresión. En safari, que también es webkit, hay una checkbox para imprimir imágenes de fondo y colores en el cuadro de diálogo de la impresora.

Su CSS debe ser así:

 @media print { body { -webkit-print-color-adjust: exact; } } .vendorListHeading th { background-color: #1a4567 !important; color: white !important; } 

Utilicé la respuesta de purgatorio101 pero tuve problemas para mantener todos los colores (icons, fondos, colores de texto, etc.), especialmente que las hojas de estilo CSS no se pueden usar con bibliotecas que cambian dinámicamente los colores de los elementos DOM. Por lo tanto, aquí hay una secuencia de comandos que cambia los estilos del elemento ( background-colour y colour ) antes de imprimir y borra los estilos una vez que se realiza la impresión. Es útil evitar escribir mucho CSS en una hoja de estilo de @media print ya que funciona independientemente de la estructura de la página.

Hay una parte del script especialmente creada para mantener el color de los icons de FontAwesome (o cualquier elemento que use un selector :before para insertar contenido coloreado).

JSFiddle mostrando el script en acción

Compatibilidad: funciona en Chrome, no probé otros navegadores.

 function setColors(selector) { var elements = $(selector); for (var i = 0; i < elements.length; i++) { var eltBackground = $(elements[i]).css('background-color'); var eltColor = $(elements[i]).css('color'); var elementStyle = elements[i].style; if (eltBackground) { elementStyle.oldBackgroundColor = { value: elementStyle.backgroundColor, importance: elementStyle.getPropertyPriority('background-color'), }; elementStyle.setProperty('background-color', eltBackground, 'important'); } if (eltColor) { elementStyle.oldColor = { value: elementStyle.color, importance: elementStyle.getPropertyPriority('color'), }; elementStyle.setProperty('color', eltColor, 'important'); } } } function resetColors(selector) { var elements = $(selector); for (var i = 0; i < elements.length; i++) { var elementStyle = elements[i].style; if (elementStyle.oldBackgroundColor) { elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance); delete elementStyle.oldBackgroundColor; } else { elementStyle.setProperty('background-color', '', ''); } if (elementStyle.oldColor) { elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance); delete elementStyle.oldColor; } else { elementStyle.setProperty('color', '', ''); } } } function setIconColors(icons) { var css = ''; $(icons).each(function (k, elt) { var selector = $(elt) .parents() .map(function () { return this.tagName; }) .get() .reverse() .concat([this.nodeName]) .join('>'); var id = $(elt).attr('id'); if (id) { selector += '#' + id; } var classNames = $(elt).attr('class'); if (classNames) { selector += '.' + $.trim(classNames).replace(/\s/gi, '.'); } css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }'; }); $('head').append(''); } function resetIconColors() { $('#print-icons-style').remove(); } 

Y luego modifique la función window.print para que establezca los estilos antes de imprimir y restablecerlos después.

 window._originalPrint = window.print; window.print = function() { setColors('body *'); setIconColors('body .fa'); window._originalPrint(); setTimeout(function () { resetColors('body *'); resetIconColors(); }, 100); } 

La parte que encuentra las rutas de los icons para crear CSS para: antes de los elementos es una copia de esta respuesta SO

Hay un estilo en los archivos css bootstrap bajo @media print {* ,: after,: before ….} que tiene los colores y estilos de fondo etiquetados como! Important, que eliminan cualquier color de fondo en cualquier elemento. Mata esos dos pedazos de CSS y funcionará.

Bootstrap está tomando la decisión de ejecutar que nunca debe tener ningún color de fondo en las impresiones, por lo que debe editar su CSS o tener otro estilo importante que tenga una precedencia más alta. Buen trabajo de arranque …

También puede usar la propiedad box-shadow .

PARA LOS QUE UTILIZAN BOOTSTRAP.CSS, ¡esta es la solución!

He intentado con todas las soluciones y no funcionaban … hasta que descubrí que bootstrap.css tenía una súper molesta @media print que restablecía todos tus colores, colores de fondo, sombras, etc.

 @media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important} 

Entonces, elimine esta sección de bootstrap.css (o bootstrap.min.css)

O anule estos valores en el css de la página que desea imprimir en su propia @media print

 @media print { body { -webkit-print-color-adjust: exact; } .customClass{ //customCss + !important; } //more of your custom css } 

Si descarga Bootstrap sin la opción “Estilos de medios impresos”, no tendrá este problema y no tendrá que eliminar manualmente el código “@media print” en su archivo bootstrap.css.

Doy doble carga a mi archivo fuente css externo y cambio el medio = “pantalla” a media = “print” y se muestran todos los bordes de mi tabla

Prueba esto :