html - imprimir - color de fondo div en la página de impresión no funciona

webkit background color

Question

Quiero usar un div que tenga un background-color , pero si imprimo la página aparece en blanco.

Cuando creo una tabla usando <tr bgcolor="#333333"> tampoco funciona.

¿Cómo puedo crear una página de impresión usando css y html ?

Mi código :

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px ''b nazanin'';">Text</span></td>
   </tr>
</table>

Answer 1

Aquí hay algo que me funcionó porque estaba usando un elemento de bloque de tamaño fijo. La imagen utilizada es 1px X 1px pero obligada a expandirse al tamaño de la caja. De esta manera, estamos imprimiendo la imagen directamente en lugar del color / imagen de fondo.

<style type="text/css">
.outer {
    width: 200px;
    height: 80px;
    position: relative;
}
.outer .grayBg {
    position: absolute;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    z-index: 1
}
.inner {
    width: 100%;
    position: relative;
    z-index: 10
}
</style>


<div class="outer"><img src="grayBg.png" class="grayBg" />
  <div class="inner">Some text</div>
</div>

Answer 2

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

Funciona para todos los navegadores y en celdas y filas de tablas.

Answer 3

En Crome "-webkit-print-color-adjust: exacto;" funciona para mi.

Utilizar:

@media print {
    .collage_bg {
        background-color: #E6E7E9 !important;
        -webkit-print-color-adjust: exact; 
    }
}

O compruebe la opción Gráficos de fondo:

Ambas opciones funcionan bien para mí.

Answer 4

Los colores de fondo y las imágenes no se imprimen de forma predeterminada.

Es una opción de impresora que sus usuarios podrían cambiar, pero absolutamente no puede contar con que sus usuarios lo saben o lo hacen. No puedes controlar esto desde el lado de la web (por lo que yo sé).

Answer 5

Me gustaría ver la forma de consulta de los medios de dirigir una hoja de estilo a la impresión. No creo que encuentre una forma común de hacer un navegador cruzado para hacer lo que quiere hacer (controlar si la impresora del usuario imprime un fondo) sin usar archivos PDF de su contenido, lo que puede no ser deseable / factible. Sin embargo, debe considerar el manejo especial de sus estilos de impresión y tal vez evitar fondos en el diseño de la página impresa.

http://www.w3.org/TR/css3-mediaqueries/

EDITAR

Al ver su otro comentario, si tiene que hacer imprimir los fondos y tener un solo usuario, enséñele a hacer que la impresora imprima fondos. Ver por ejemplo en Firefox (casilla de verificación):

Answer 6

Sin embargo, siempre puedes usar una imagen para eso. Haz una imagen con un ancho de 1px y repítala así:

background: url(''path/to/image.png'') repeat-x;