Come posso stampare immagini di sfondo in FF o IE?

Question

C'è un modo per impostare ff e cioè per stampare immagini di sfondo?

Sto usando l'immagine stelle per classificare alcune abilità e l'ho impostato come immagine di sfondo e posizionamento per impostare uno start, due, tre, ecc. Quando provo a stampare la pagina le immagini scompaiono.

Quindi c'è un modo per farli apparire quando stampo la pagina o almeno ho un modo di sostituire le immagini con * o qualcosa che sarebbe visibile?

Answer 1

Hai mai pensato di utilizzare un foglio di stile di stampa? Questo potrebbe consentire di fare qualcosa di simile:

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

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

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

o ancora più semplice:

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

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

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

È possibile specificare i fogli di stile browser dovrebbero utilizzare fornendo un tag dei media, sia con CSS o sull'elemento link:

<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

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

Ci deve essere qualcosa di simile per FF.

p.s. non puoi impostare questo per i clienti!

p.s.2. puoi sostituire queste stelle con le immagini in primo piano (assolute se necessario) in css (media = "stampa").

Answer 3

In Firefox, selezionare File => Imposta pagina. C'è una casella di controllo per "Stampa sfondo (colori & immagini)". Basta controllare e dovresti essere tutto pronto.

Answer 4

Credo che questa sia un'impostazione del browser, non il back-end dei siti web. Potrei comunque sbagliarmi.

Answer 5

Nel file print.css modificare l'immagine di sfondo in una voce di elenco.

Quindi:

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

Questo metodo è descritto più qui: http://www.web-graphics.com/mtarchive/001703.php

Answer 6

In realtà ho trovato la risposta ad essere piuttosto semplice.

Situazione: Avevo un tag div con un'immagine di sfondo. Quale non verrebbe stampato quando si stampa.

Soluzione:

1. creare un altro foglio di stile chiamato "stampa.css"

2. Aggiungere la seguente riga di codice per le vostre tutte le pagine web subito dopo il vostro link CSS foglio di stile originale:

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

3. Subito dopo il vostro per l'intestazione originale non la stampa, aggiungere il seguente:

   <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. Nel file style.css, che è lo stile principale css per il tuo sito, aggiungere la seguente riga:

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

5. Nel file print.css, aggiungere il seguente codice:

   #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 */ 
   

Quello che state facendo è essenzialmente spegnere l'intestazione sul normale pagina "schermo" e girando la printheader ON quando fai una chiamata stampa.

** Nota: è necessario modificare il file print.css per includere altri elementi del file style.css per formattare font, colori, ecc. Giocare con "Anteprima di stampa" e aggiungere gli elementi hai bisogno fino a ottenere la stampa che stavi cercando.

Answer 7

Ho avuto lo stesso problema con IE che non supportava la stampa dello sfondo.

Così ho creato 2 div, un div aveva una Z più alta e aveva il contenuto del testo. Il secondo div era immediatamente dietro il div anteriore ma un indice Z più basso e aveva un'immagine (img non immagine di sfondo) per la larghezza e l'altezza del 100%. Quindi quando ho mostrato i 2 div insieme sembrava un div perché si sovrapponevano perfettamente. Quando stampo in IE Browser, viene mostrato con un'immagine perché l'immagine non è un'immagine di sfondo ma un normale tag img che riempie un div inferiore.

un po 'di codice.

<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> 

in CSS mettere questo

.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

Non utilizzare background-image per visualizzare le immagini stampabili, utilizzare il normale <img> tag, invece.

background-image è significato per poco importanti immagini che la maggior parte dei browser moderni tendono a saltare durante la stampa (impostazione predefinita in Internet Explorer 11, Chrome 35, 30 FF).

Perché dovresti non desidera utilizzare il tag img?

• allineamento emette - utilizzare il posizionamento assoluto per risolvere problemi di allineamento.

• sprite - sprite è possible utilizzando semplici img e div tag.

• rendono più difficile per gli utenti di salvare l'immagine - Questo è also possible con semplici img e div tag.

• Per "mantenere pulito il mio codice HTML" - fare in modo che una soluzione alternativa la renda più pulita? Lascia perdere :)