Html 如何在 FF 或 IE 中打印背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/596876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I print background images in FF or IE?
提问by AntonioCS
Is there any way to set ff and ie to print background images?
有没有办法设置ff和ie打印背景图像？
I am using stars image to classify some skills and I set it as a background image and positioning to either set one start, two, three, etc. When I try to print the page the images disappear.
我正在使用星星图像对一些技能进行分类，并将其设置为背景图像并定位为设置一个开始、两个、三个等。当我尝试打印页面时，图像消失。
So is there any way to make them appear when I print the page or at least have a way of replacing the images with * or something that would be visible?
那么有没有办法让它们在我打印页面时出现，或者至少有办法用 * 或可见的东西替换图像？
采纳答案by Ross
Have you considered using a print stylesheet? This could allow you to do something like:
您是否考虑过使用打印样式表？这可以让您执行以下操作：
<div class="star">*</div>
/* media:screen */
.star {
background: ...;
overflow: hidden;
text-indent: 9999em;
}
/* media:print */
.star {
text-indent: 0;
}
or even easier:
甚至更简单：
<div class="star"><img src="./images/star.jpg" alt="*" /></div>
/* media:screen */
.star img {
visibility: hidden;
}
/* media:print */
.star img {
visibility: visible;
}
You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:
您可以通过提供媒体标签（通过 css 或在链接元素上）来指定浏览器应使用的样式表：
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
回答by Ross
In your print.css file change the background-image to a list item.
在您的 print.css 文件中，将 background-image 更改为列表项。
So:
所以：
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
}
This method is described more here: http://www.web-graphics.com/mtarchive/001703.php
这种方法在这里有更多的描述：http: //www.web-graphics.com/mtarchive/001703.php
回答by Ascalonian
In Firefox, go to File => Page Setup. There is a checkbox for "Print Background (colors & images)". Just check that and you should be all set.
在 Firefox 中，转到文件 => 页面设置。有一个“打印背景（颜色和图像）”复选框。只需检查一下，你就应该准备好了。
回答by Chris Canada
Actually I found the answer to be rather simple.
其实我发现答案很简单。
Situation: I had a div tag with a background image. Which would not printout when printing.
情况：我有一个带有背景图像的 div 标签。打印时不会打印出来。
Solution:
解决方案：
Create another style sheet called "print.css"
Add the following line of code to your all your web pages right after your orginal css stylesheet link:
<link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" />Immediately after your for the original non printing header, add the following:
<div id="header"></div> <!-- YOUR NON PRINTING HEADER --> <div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>In your style.css file, which is the main css style for you site, add the following line:
#printheader {display: none; } /* Makes the print header not visible */In your print.css file, add the following code:
#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”的样式表
在原始 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>在您站点的主要 css 样式 style.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 */
What you are doing is essentially turning OFF the header on the normal "screen" page and turning the printheader ON when you make a print call.
您所做的基本上是关闭正常“屏幕”页面上的标题，并在您拨打打印电话时打开打印标题。
** Please note: you will need to modify the print.css file to include other elements of your style.css file to format the fonts, colors, etc. Play around with "Print Preview" and add in the elements you need till you get the printout that you've been seeking.
** 请注意：您需要修改 print.css 文件以包含 style.css 文件的其他元素以格式化字体、颜色等。玩弄“打印预览”并添加您需要的元素，直到您获得您一直在寻找的打印件。
回答by Glavi?
For IE http://support.microsoft.com/kb/980077
对于 IE http://support.microsoft.com/kb/980077
There must be something similar for FF.
FF 一定有类似的东西。
p.s. you cannot set this for clients!
ps 你不能为客户设置这个！
p.s.2. you can replace this stars with foreground pictures (absolute if needed) in css (media="print").
ps2。你可以用 css (media="print") 中的前景图片（如果需要绝对）替换这些星星。
回答by rustyx
Don't use background-imageto display printable images, use the normal <img>tag instead.
不要background-image用于显示可打印的图像，<img>而是使用普通标签。
background-imageis meant for unimportantimages which most modern browsers tend to skip during printing (default setting in IE 11, Chrome 35, FF 30).
background-image用于大多数现代浏览器在打印过程中倾向于跳过的不重要图像（IE 11、Chrome 35、FF 30 中的默认设置）。
Why would you notwant to use the imgtag?
为什么你不希望使用的img标签？
Alignment issues- Use absolute positioning to solve alignment issues.
Spriting- Spriting is possibleusing simple
imganddivtags.Make it more difficult for users to save the image- That is also possiblewith simple
imganddivtags.To "keep my HTML clean"- do any of the workaround solutions really make it cleaner for you? Give it up :)
回答by Nigel Heywood
I had the same issue with IE not supporting the printing the background.
我有同样的问题，IE 不支持打印背景。
So I created 2 divs, one div had a higher Z and had the text content. The second div was immediately behind the front div but a lower Z index and had a image (img not background image) for width and height of 100%. So when I showed the 2 divs together it looked like one div because they perfectly overlapped. When I printed in IE Browser it shows with image because the image is not a background image but a normal img tag that fills a lower div.
所以我创建了 2 个 div，一个 div 有更高的 Z 并且有文本内容。第二个 div 紧跟在前面的 div 后面，但 Z 索引较低，并且有一个图像（img 不是背景图像）的宽度和高度为 100%。因此，当我将 2 个 div 显示在一起时，它看起来像一个 div，因为它们完全重叠。当我在 IE 浏览器中打印时，它显示图像，因为图像不是背景图像，而是填充较低 div 的普通 img 标签。
some 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>
in CSS put this
在 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;
}
回答by SD.
I believe this is a browser setting, not the backend of the web sites. I could be wrong however.
我相信这是浏览器设置，而不是网站的后端。然而，我可能是错的。
