如何在FF或IE中打印背景图像?

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

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

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

甚至更简单:

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

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

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

您可以通过css或链接元素提供媒体标记来指定浏览器应使用的样式表:

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

在Firefox中,转到File=>页面设置。“打印背景(颜色和图像)”有一个复选框。只要检查一下就可以了。

因此:

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

http://www.web-graphics.com/mtarchive/001703.php

事实上,我发现答案很简单。

情境:我有一个带有背景图像的div标签。打印时不会打印出来。

解决方案:

1. 创建另一个名为“print.css”的样式表

2. 在原始css样式表链接之后的所有网页中添加以下代码行:

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

3. 在为原始非打印页眉添加标题后,立即添加以下内容:

   <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. 在您的style.css文件(站点的主要css样式)中,添加以下行:

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

5. 在print.css文件中,添加以下代码:

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

**请注意:您需要修改print.css文件,以包含style.css文件的其他元素,以格式化字体、颜色等。请使用“打印预览”并添加所需的元素,直到获得所需的打印输出。

不要使用 background-image 要显示可打印的图像,请使用普通 <img>

背景图像 不重要的 大多数现代浏览器在打印过程中倾向于跳过的图像(IE 11、Chrome 35、FF 30中的默认设置)。

不 要使用 img 标签

• 对齐问题 -使用绝对定位来解决对齐问题。

• -小枝是 possible img 和 div

• 使用户保存图像更加困难 -就是 also possible 简单的 img 和 div

• “保持我的HTML干净”

对于IE http://support.microsoft.com/kb/980077

FF一定有类似的东西。

p、 您不能为客户设置此选项!

所以我创建了两个div,一个div有更高的Z,并且有文本内容。第二个div紧跟在前面的div后面,但是Z指数较低,并且有一个宽度和高度为100%的图像(img不是背景图像)。所以当我把两个div放在一起时,它看起来像一个div,因为它们完全重叠。当我在IE浏览器中打印时,它显示为图像,因为图像不是背景图像,而是填充较低分区的普通img标记。

一些代码。

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

用CSS的话来说

.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;
}