如何在FF或IE中打印背景图像？
有什么办法可以设置ff，即打印背景图片吗？
我使用星星图像来分类一些技能，我将其设置为背景图像和定位，以设置一个开始，两个，三个等。当我尝试打印页面的图像消失。
那么有没有什么办法让它们出现在我打印页面的时候，或者至less有一种方法可以用*或者可见的东西replace图像呢？
你有没有考虑使用打印样式表？ 这可以让你做这样的事情：
<div class="star">*</div> /* media:screen */ .star { background: ...; overflow: hidden; text-indent: 9999em; } /* media:print */ .star { text-indent: 0; } 甚至更简单：
<div class="star"><img src=".http://img.dovov.comstar.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中，转到文件=>页面设置。 有一个checkbox“打印背景（颜色和图像）”。 只要检查一下，你应该全部设置。
在您的print.css文件中，将背景图像更改为列表项目。
所以：
.background { display: list-item; list-style-image: url(yourbackgroundimage.gif); list-style-position: inside; }
这个方法在这里更多描述： http ： //www.web-graphics.com/mtarchive/001703.php
其实我觉得答案很简单。
情况：我有一个背景图片的div标签。 打印时不打印。
解：
-
创build另一个名为“print.css”的样式表
-
在您的原始CSS样式表链接之后，将以下代码行添加到您的所有网页中：
<link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" /> -
紧接在您的原始非打印标题之后，添加以下内容：
<div id="header"></div> <!-- YOUR NON PRINTING HEADER --> <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div> -
在您的style.css文件（这是您的站点的主要CSS样式）中，添加以下行：
#printheader {display: none; } /* Makes the print header not visible */ -
在您的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 */
你所做的事情本质上是closures正常的“屏幕”页面上的标题，并在打印电话时打开打印头。
**请注意：您将需要修改print.css文件以包含style.css文件的其他元素来格式化字体，颜色等。使用“打印预览”进行播放并添加所需的元素，直到您得到你一直在寻找的打印输出。
对于IE http://support.microsoft.com/kb/980077
FF一定有类似的东西。
ps你不能设置这个客户端！
PS2。 你可以在css（media =“print”）中用前景图片（绝对如果需要）replace这个星星。
不要使用background-image来显示可打印的图像，而是使用正常的<img>标签。
background-image是指大多数现代浏览器在打印过程中往往会跳过的不重要图像（IE 11，Chrome 35，FF 30中的默认设置）。
为什么你不想使用img标签？
-
alignment问题 – 使用绝对定位来解决alignment问题。
-
Spriting – Spriting 可以使用简单的
img和div标签。 -
让用户更难以保存图像 – 简单的
img和div标签也是可能的 。 -
为了“保持我的HTML清洁” – 做任何解决scheme的解决scheme真的让你更清洁？ 放弃 ：）
我有与IE不支持打印背景相同的问题。
所以我创build了2个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/publichttp://img.dovov.comcontentGrad.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; }
我相信这是一个浏览器设置，而不是网站的后端。 但是我可能是错的。
