css - type - preparar html para imprimir

Uso de imprimir css, imagen agregada antes: cuerpo no mostrado en Internet Explorer 8

Question

Estoy usando un css de impresión por separado en nuestro sitio web. Se ha solicitado que tengamos nuestro logotipo en la parte superior de las páginas impresas. Este es el código que estoy usando para print.css:

body:before {
content: url(../images/logo.gif);
}

Esto funciona en Firefox, Chrome, Safari y Opera ... y, por supuesto, usted sabe lo que vendrá después.

No funciona en Internet Explorer 8, que aparentemente admite antes como una pseudoclase: http://www.quirksmode.org/css/beforeafter_content.html

En la vista previa de la impresión, hay un espacio en blanco del mismo tamaño que el logotipo pero nuestro logotipo no se imprime. Si cambio el código a:

content: "Test Text" url(../images/logo.gif);

El "Texto de prueba" muestra, pero aún no el logotipo.

¿Alguien tiene alguna idea? Se hizo muy difícil que no pueda depurar la "vista previa de impresión" y simplemente cambiar el tipo de medio en los enlaces CSS hace que algo completamente diferente en la pantalla del navegador.

Cheers Tama

Answer 1

No puede imprimir imágenes de fondo por defecto. Los usuarios deben cambiar la configuración de su navegador para imprimir colores e imágenes de fondo.

Su mejor opción es agregar algo de HTML como este:

<div class="PrintOnly">
  <img id="PrintLogo" src="logo.gif"/>
</div>

Diseñando algo así para esconderse explícitamente de las configuraciones de medios no impresos:

  .PrintOnly {         display:none; } 
   @media print {  
      .PrintOnly {     display:block; }
   }