如何打印带有背景图像的网页？ [复制]答案

【问题标题】：How to print webpage with background image? [duplicate]如何打印带有背景图像的网页？ [复制]
【发布时间】：2011-07-01 04:43:38
【问题描述】：

我正在尝试在 IE 中使用背景图像打印网页表单；现在的问题是它没有在打印中显示背景图像。有没有办法解决它，因为我尝试了很多技巧，但没有一个真正起作用。如果有人之前修复过，请分享。

【问题讨论】：

标签： javascript css browser printing

【解决方案1】：

这仅适用于可能尝试花费大量时间打印 css 背景图像的人。这可能不是 100% 有效，但您可以从这里选择。

解决方案：不可能（如果 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",'..');

    }
 });

PS：要在页面上打印半张图片，我们需要为 div 设置一个宽度（即 $(this) ）小于 background-image 的实际宽度（由上面动态创建的 img 标签中的 src 指定) ，它将显示切片图像

【讨论】：

【解决方案2】：

默认情况下，IE 不会打印背景图像和颜色 - 这是一种浏览器设置，用于节省墨水/提高打印输出的易读性。

除了告诉您的用户更改此设置之外，您唯一能做的就是使用真实的图像元素而不是背景图像，并使用 CSS 将您的文本放在前面。

为什么需要打印背景图像？如果是因为背景图像较暗而前面的文本较浅（因此打印时不可读），那么您可以做的是设置一个仅打印的样式表来设置较暗的文本。

【讨论】：

【解决方案3】：

这里有两个非常好的帖子，之前在 stackoverflow 中问过：

Print webpage with background images and colors?

https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie

它们都参考了列表样式的用法。

【讨论】：

【解决方案4】：

转到工具> Internet 选项，单击“高级”选项卡。向下滚动到名为“打印”的标题，选中“打印背景颜色和图像”。

此说明适用于 IE 8.0，但对于旧版本应该有些相同。

这默认为未选中，因为不是每个人都想打印花哨的东西，而只是想打印文本。但是现在，想要打印所有东西是很正常的！

【讨论】：

在 IE11 中这仍然可能吗？我在任何地方都没有看到这个设置

【解决方案5】：

如果仅用于背景图像，您可以尝试右键单击背景，然后选择“显示背景图像”之类的内容。

但是，如果您想要整个网页，您可以随时尝试“打印屏幕”并在绘图中打开新制作的位图并打印。

【讨论】：

【解决方案6】：

查看这篇文章：

http://webdesign.about.com/cs/css/a/aa042103a.htm

我用它来制作自定义打印页面，不同于屏幕打印页面。

【讨论】：

【解决方案7】：

在谷歌上的第一次点击： http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm

刚刚检查，选项还在IE8中。

默认是不打印背景颜色和图片，可能是为了节省墨水。

【讨论】：