Javascript 如何打印带有背景图像的网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5064904/
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 to print webpage with background image?
提问by bin2k
I'm trying to print a web page form in IE with a background-image; now the issue is that it is not showing background-image in its print. Is there a way to fix it because I tried lots of tricks but none of them are actually working. if any one of you fixed it before please share.
我正在尝试使用背景图像在 IE 中打印网页表单；现在的问题是它没有在打印中显示背景图像。有没有办法解决它，因为我尝试了很多技巧，但没有一个真正起作用。如果你们中的任何人之前修复过它，请分享。
回答by dillip pattnaik
This is just for people who may try to spend a lot of time to print css background images. This may not be 100% working, but you may pick from here.
这仅适用于可能尝试花费大量时间打印 css 背景图像的人。这可能不是 100% 有效，但您可以从这里选择。
Solution: not possible (if overlapping images are present in UI)
解决方案：不可能（如果 UI 中存在重叠图像）
$('#rootdiv').find('div').each(function(){
if( $(this).css("background-image") != "none"){
$(this).css("overflow" ,"hidden").css("position", "relative");
$(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');
$(this).css("background",'..');
}
});
P.S.: To have sliced half image print on the page, we need to set a width for the div ( i.e., $(this) ) less than actual width of background-image( specified by src in dynamically created img tag above) , it will show sliced image
PS：要在页面上打印半幅图像，我们需要为 div（即 $(this) ）设置一个小于背景图像实际宽度的宽度（由上面动态创建的 img 标签中的 src 指定），它将显示切片图像
回答by TNC
Here are two really good posts, previously asked in stackoverflow:
这里有两个非常好的帖子，之前在 stackoverflow 中询问过：
Print webpage with background images and colors?
https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
They both reference list style usage.
他们都参考了列表样式的用法。
回答by ngobw
Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images".
转到“工具”>“Internet 选项”，单击“高级”选项卡。向下滚动到名为“打印”的标题，选中“打印背景颜色和图像”。
This instruction is for IE 8.0, but should be somewhat the same for older versions.
此指令适用于 IE 8.0，但对于旧版本应该有些相同。
This is default to unchecked because not everyone wants to print the fancy stuff but only the text.. But nowadays, its quite a norm to want everything in the printing!
这默认为未选中，因为不是每个人都想打印花哨的东西而只想打印文本。
回答by Dan S
By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.
默认情况下，IE 不会打印背景图像和颜色——这是一个浏览器设置，用于节省墨水/提高打印输出的可读性。
Apart from telling your users to change this setting, the only thing you can do about this is to use real image elements instead of background-images and position your text in front with CSS.
除了告诉你的用户改变这个设置之外，你唯一能做的就是使用真实的图像元素而不是背景图像，并用 CSS 将你的文本放在前面。
Why do you need the background-image to print out? If it is because the background image is dark and the text in front is light (and therefore unreadable when printed), then what you can do is have a print-only stylesheet that sets darker text.
为什么需要背景图像打印出来？如果是因为背景图像较暗而前面的文本较浅（因此在打印时无法读取），那么您可以做的是使用一个仅打印样式表来设置较暗的文本。
回答by radu florescu
Check this article:
检查这篇文章：
http://webdesign.about.com/cs/css/a/aa042103a.htm
http://webdesign.about.com/cs/css/a/aa042103a.htm
I use it to make custom print page ,different from the one from screen.
我用它来制作自定义打印页面，与屏幕上的页面不同。
回答by Kriem
If it's only for the background image, you could try and right click the background, and select something like 'show background-image.'
如果它仅用于背景图像，您可以尝试右键单击背景，然后选择诸如“显示背景图像”之类的内容。
But, if you want the web page as a whole, you could always try to 'print the screen' and open the newly made bitmap in paint and print that.
但是，如果您想要整个网页，您总是可以尝试“打印屏幕”并在油漆中打开新制作的位图并打印它。
回答by the JinX
First hit in google: http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm
第一次在谷歌点击：http: //www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm
Just checked and the option is still in IE8.
刚刚检查过，该选项仍在 IE8 中。
The default is to not print background colors and images, probably to save ink.
默认是不打印背景颜色和图像，可能是为了节省墨水。
