Comment imprimer des images d'arrière-plan dans FF ou IE ?

Question

Existe-t-il un moyen de configurer ff et ie pour qu'ils impriment des images d'arrière-plan ?

J'utilise l'image des étoiles pour classer certaines compétences et je l'ai définie comme image d'arrière-plan et je l'ai positionnée pour qu'elle serve de point de départ, de point d'arrivée, de point de départ, etc. Lorsque j'essaie d'imprimer la page, les images disparaissent.

Existe-t-il un moyen de les faire apparaître lorsque j'imprime la page ou au moins de remplacer les images par des * ou quelque chose de visible ?

Answer 1

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

Il doit y avoir quelque chose de similaire pour FF.

p.s. Vous ne pouvez pas définir ce paramètre pour les clients !

p.s.2. vous pouvez remplacer ces étoiles par des images de premier plan (absolues si nécessaire) en css (media="print").

Answer 2

J'ai eu le même problème avec IE qui ne prenait pas en charge l'impression de l'arrière-plan.

J'ai donc créé 2 divs, dont l'une avait un Z plus élevé et contenait le texte. La seconde div se trouvait juste derrière la première div mais avait un indice Z plus bas et contenait une image (img et non une image de fond) d'une largeur et d'une hauteur de 100%. Ainsi, lorsque j'ai affiché les deux divs ensemble, cela ressemblait à une seule div parce qu'elles se chevauchaient parfaitement. Lorsque j'imprime dans le navigateur IE, l'image s'affiche parce qu'il ne s'agit pas d'une image d'arrière-plan, mais d'une balise img normale qui remplit une division inférieure.

un peu de code.

<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, mettez ceci

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

Je pense qu'il s'agit d'un paramètre du navigateur, et non de l'arrière-plan des sites web. Je peux cependant me tromper.