¿Cómo puedo imprimir imágenes de fondo en FF o IE?

Question

¿Hay alguna manera de establecer ff y, por ejemplo, imprimir imágenes de fondo?

Estoy usando la imagen de estrellas para clasificar algunas habilidades y la configuré como imagen de fondo y posicionamiento para establecer un inicio, dos, tres, etc. Cuando intento imprimir la página, las imágenes desaparecen.

¿Hay alguna manera de hacer que aparezcan cuando imprimo la página o al menos tener una forma de reemplazar las imágenes con * o algo que sería visible?

Answer 1

¿Ha considerado utilizar una hoja de estilo de impresión? Esto podría permitir que usted pueda hacer algo como:

<div class="star">*</div> 

/* media:screen */ 
.star { 
    background: ...; 
    overflow: hidden; 
    text-indent: 9999em; 
} 

/* media:print */ 
.star { 
    text-indent: 0; 
} 

o incluso más fácil:

<div class="star"><img src="./images/star.jpg" alt="*" /></div> 

/* media:screen */ 
.star img { 
    visibility: hidden; 
} 

/* media:print */ 
.star img { 
    visibility: visible; 
} 

Puede especificar hojas de estilo navegadores deben utilizar mediante el suministro de una etiqueta de medios de comunicación, ya sea por CSS o en el elemento de enlace:

<link rel="stylesheet" type="text/css" href="main.css" media="screen" /> 
<link rel="print stylesheet" type="text/css" href="print.css" media="print" /> 

Answer 2

Para IE http://support.microsoft.com/kb/980077

Debe haber algo similar para FF.

p.s. ¡no puedes configurar esto para los clientes!

p.s.2. puede reemplazar esta estrella con imágenes en primer plano (absoluta si es necesario) en css (media = "print").

Answer 3

En Firefox, vaya a Archivo => Configurar página. Hay una casilla de verificación para "Imprimir fondo (colores & imágenes)". Solo revisa eso y deberías estar todo listo.

Answer 4

Creo que esta es una configuración de navegador, no el servidor de los sitios web. Sin embargo, podría estar equivocado.

Answer 5

En el archivo print.css, cambie la imagen de fondo por un elemento de la lista.

Así:

.background { 
    display: list-item; 
    list-style-image: url(yourbackgroundimage.gif); 
    list-style-position: inside; 
} 

Este método se describe más aquí: http://www.web-graphics.com/mtarchive/001703.php

Answer 6

En realidad he encontrado que la respuesta sea bastante simple.

Situación: Tenía una etiqueta div con una imagen de fondo. Lo cual no se imprimiría al imprimir.

Solución:

1. crear otra hoja de estilo llamado "impresión.css"

2. Añadir la siguiente línea de código a sus todas sus páginas web justo después de su enlace de hoja de estilos CSS original:

   <link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" /> 
   

3. Inmediatamente después de la de la cabecera original no impresión, agregar lo siguiente:

   <div id="header"></div> <!-- YOUR NON PRINTING HEADER --> 
   
   <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div> 
   

4. En el archivo style.css, que es el principal estilo CSS para su sitio, agregue la siguiente línea:

   #printheader {display: none; } /* Makes the print header not visible */ 
   

5. En el archivo print.css, agregue el código siguiente:

   #footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */ 
   
   #container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */ 
   
   #printheader {display: block; } /* Turns ON the div when printing */ 
   

Lo que está haciendo es esencialmente de desconectar la cabecera de la página normal "pantalla" y girando el Printheader ON cuando haces una llamada de impresión.

** Tenga en cuenta: tendrá que modificar el archivo print.css para incluir otros elementos de su archivo style.css para formatear las fuentes, colores, etc. Jugar con "Vista previa de impresión" y agregar los elementos lo necesitas hasta que obtengas la impresión que has estado buscando.

Answer 7

Tuve el mismo problema con IE que no admite la impresión del fondo.

Así que creé 2 divs, un div tenía una Z más alta y tenía el contenido de texto. El segundo div estaba inmediatamente detrás del div frontal pero con un índice Z más bajo y tenía una imagen (img no de fondo) para ancho y alto del 100%. Entonces, cuando mostré los 2 divs juntos, se veía como un div porque se superponían perfectamente. Cuando imprimí en IE Browser, se muestra con la imagen porque la imagen no es una imagen de fondo sino una etiqueta de img normal que ocupa un div inferior.

algún código.

<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div> 
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;"> 
<!-- provides the background image for ie browser so that it does not show the lower level divs. --> 
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" /> 
</div> 

<script language="javascript" type="text/javascript"> 
function showSurvey(surveyResponseId) { 
    var e = document.getElementById("survey"); 
    var bkgd = document.getElementById("surveyBackground"); 
    var focusinput = document.getElementById('focusinput'); 
    var nh = 'data-nohide'; 

    if (e.style.display=='none') { 
     e.style.display='block';//show div 
     bkgd.style.display='block';//show div 
    } 
    focusinput.focus();//set focus so we know when they click outside 

    e.onclick = function(e) { 
     this.style.display='none';//hide div if they click on it 
     bkgd.style.display='none';//show div 
    }; 
    //if the user press ESC 
    focusinput.onkeyup = function(e){ 
     if(e.keyCode === 27){ 
      var survey = document.getElementById("survey"); 
      var bkgd = document.getElementById("surveyBackground"); 
      //hide the div 
      survey.style.display = 'none'; 
      bkgd.style.display = 'none'; 
      this.removeAttribute(nh); 
     }else{ 
      //do something else with other keys(ie:down, up, enter)... 
      focusinput.focus(); 
     } 
    }; 
    //click somewhere else input onblur 
    // was taken out because the browser print function would close the survey div page. 
    //focusinput.onblur = function(){ 
    // if(!e.getAttribute(nh)){ 
    //  //hide the div 
    //  e.style.display = 'none'; 
    // } 
    //};  

    var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId; 
    YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground}); 
} 

var showBackground = function() { 
    var e = document.getElementById("survey"); 
    var bkgd = document.getElementById("surveyBackground"); 
    bkgd.style.width = e.innerWidth(); 
    bkgd.style.height = e.innerHeight(); 
    bkgd.style.left = e.offsetWidth(); 
    bkgd.style.top = e.offsetHeight(); 
} 

window.onload = function() { 
    var focusinput = document.getElementById('focusinput'); 
    focusinput.focus();//set focus so we know when they click outside 
} 
</script> 

en CSS poner esto

.surveyResponseWindow 
{ 
width:500px; 
height:600px; 
z-index: 2; 
position: absolute; 
top:100px; 
left:150px; 
border:1px solid #AAAAAA; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
box-shadow: -1px 7px 15px -2px #000; 
} 

.surveyBackgroundDiv 
{ 
z-index: 1; 
position: absolute; 
top:100px; 
left:150px; 
width:500px; 
height:600px; 
border:1px solid #AAAAAA; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
box-shadow: -1px 7px 15px -2px #000; 
} 

Answer 8

No utilice background-image para mostrar imágenes imprimibles, utilice la etiqueta normal en lugar <img>.

background-image es para sin importancia imágenes que la mayoría de los navegadores modernos tienden a saltar durante la impresión (ajuste por defecto en IE 11, Chrome 35, FF 30).

¿Por qué no quiere usar la etiqueta img?

• alineación emite - Uso posicionamiento absoluto para resolver problemas de alineación.

• spriting - spriting es possible usando simples img y div etiquetas.

• que sea más difícil para los usuarios guardar la imagen - Eso es also possible con simples img y div etiquetas.

• Para "mantener mi HTML limpio" - ¿Alguna de las soluciones alternativas realmente lo hace más limpio para usted? Renunciar :)