HTML/CSS: ¿Por qué el color de fondo se vuelve blanco al imprimir?

Mi color de fondo o incluso los colores de fuente de mis elementos de repente se vuelven blancos al imprimir. He aquí una muestra de marcado:HTML/CSS: ¿Por qué el color de fondo se vuelve blanco al imprimir?

<div id="ActionPanel"> 
    <input type="button" onclick="javascript:window.print();" value="Print"> 
</div> 

<p id="P1"> 
    Hello World! 
</p> 

<p id="P2"> 
    Hello Web! 
</p> 

<p id="P3"> 
    Hello StackOverflow 
</p>

un Aquí está la CSS

@media all 
{ 
    body 
    { 
     background-color:green; 
    } 

    #P1 
    { 
     background-color:#f00;  
    } 
} 

@media print 
{ 
    #ActionPanel 
    { 
     visibility:hidden; 
    } 
}

Fuente

2011-08-17 dpp

Todos los fondos se eliminan automáticamente fuera de la versión impresa. Es esa manera de evitar el desperdicio de tinta.

Sin embargo, puede habilitarlo en su navegador. (Cómo hacer eso depende de cada navegador específicamente).

Fuente

2011-08-17 09:19:27

No hay forma de imprimir los colores de fondo sin configurar manualmente una preferencia en su navegador. Sin embargo, esto puede no ser una opción para algunas personas. La mejor solución que puedo encontrar es bastante poco elegante. En lugar de usar "color de fondo" (que no se imprime), debe crear una etiqueta div con un borde de color grande en ella. El caso es que los bordes de colores pueden imprimirse correctamente. Luego, cuando se muestre el color resaltado, coloque otra etiqueta div con el texto encima. No es elegante, pero funciona.

Lo mejor es configurar tanto el div de texto como el resaltar div dentro de un tercer div para ubicarlo fácilmente. los divs internos deberían estar en posición "absoluta" y el div externo debería tener una posición "relativa". Este código de muestra se prueba tanto en firefox como en cromo:

<style type="text/css"> 
    #outer_box { 
     position: relative; 
     border: 2px solid black; 
     width: 500px; 
     height:300px; 
    } 

    #yellow_highlight { 
     position: absolute; 
     width: 0px; 
     height: 30px; 
     border-left: 300px; 
     border-color: yellow; 
     border-style: solid; 
     top: 0; 
     left: 0px 
    } 

    #message_text { 
     position: absolute; 
     top: 0; 
     left: 0px; 
    } 
</style> 

<body> 
    <div id="outer_box"> 
    <div id="yellow_highlight">&nbsp;</div> 
    <div id="message_text">hello, world!</div> 
    </div> 
</body>

Fuente

2012-03-15 20:32:27

HTML/CSS: ¿Por qué el color de fondo se vuelve blanco al imprimir?

Respuesta

Cuestiones relacionadas