blocks|key|1718242|text|这是专为那些想花很多时间打印css背景图片的人准备的。这可能不是100%25有效，但你可以从这里选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1718243|解决方案:不可能(如果UI中存在重叠图像)|1718244|+$('#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="'%2B$(this).css("background-image").replace(/"/g,"").replace(/url$%7C$$/ig,+"")%2B'">');

++++++++$(this).css("background",'..');

++++}
+});|code-block|syntax|javascript|1718245|附注:为了在页面上打印半张切片图像，我们需要设置div的宽度(即$(this)+)小于背景图像的实际宽度(由上面动态创建的img标记中的src指定)，它将显示切片图像|1718246|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

Solution: not possible (if overlapping images are present in UI)

<pre><code> $('#rootdiv').find('div').each(function(){
 if( $(this).css("background-image") != "none"){

 $(this).css("overflow" ,"hidden").css("position", "relative");
 $(this).prepend('&lt;img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url$|$$/ig, "")+'"&gt;');

 $(this).css("background",'..');

 }
 });
</code></pre>

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

blocks|key|4313735|text|这里有两个非常好的帖子，之前在stackoverflow中问过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4313736|Print+webpage+with+background+images+and+colors?|offset|length|4313737|https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie+|4313738|它们都引用了列表样式的用法。|4313739|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1038605/print-webpage-with-background-images-and-colors|1|https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie^0|0|0|1C|0|0|0|2H|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

Here are two really good posts, previously asked in stackoverflow:

<a href="https://stackoverflow.com/questions/1038605/print-webpage-with-background-images-and-colors">Print webpage with background images and colors?</a>

<a href="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
</a>

They both reference list style usage.

blocks|key|2201618|text|转到工具>+Internet选项，单击“高级”选项卡。向下滚动到名为“打印”的标题，选中“打印背景颜色和图像”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2201619|此说明适用于IE+8.0，但对于较旧的版本应稍有相同。|2201620|这是默认未选中的，因为不是每个人都想打印花哨的东西，而只想打印文本。但是现在，想要所有的东西都打印出来是相当正常的！|2201621|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images". 

This instruction is for IE 8.0, but should be somewhat the same for older versions.

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!

blocks|key|1720542|text|查看这篇文章：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1720543|http://webdesign.about.com/cs/css/a/aa042103a.htm|offset|length|1720544|我使用它来制作自定义打印页面，不同于屏幕上的页面。|1720545|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Check this article:

<a href="http://webdesign.about.com/cs/css/a/aa042103a.htm" rel="nofollow">http://webdesign.about.com/cs/css/a/aa042103a.htm</a>

I use it to make custom print page ,different from the one from screen.

blocks|key|4313636|text|如果只显示背景图像，你可以尝试右键单击背景，然后选择类似于“显示背景-图像”的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4313637|但是，如果你想要整个网页，你总是可以尝试“打印屏幕”，并打开新制作的位图，然后打印出来。|4313638|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|5730998|text|默认情况下，IE不会打印背景图像和颜色-这是浏览器的设置，以节省墨水/提高打印输出的可读性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5730999|除了告诉你的用户改变这个设置之外，你能做的唯一的事情就是使用真实的图像元素而不是背景图像，并使用CSS将你的文本放在前面。|5731000|为什么需要打印背景图像？如果是因为背景图像是深色的，而前面的文本是浅色的(因此在打印时不可读)，那么您可以做的就是使用一个仅打印的样式表来设置深色的文本。|5731001|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.

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.

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.

blocks|key|1720525|text|在谷歌的第一个热门：http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1720526|刚刚检查过，该选项仍在IE8中。|1720527|默认情况下，不打印背景颜色和图像，这可能是为了节省墨水。|1720528|entityMap|0|LINK|mutability|MUTABLE|url|http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm^0|A|28|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

First hit in google:
<a href="http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm" rel="nofollow">http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm</a>

Just checked and the option is still in IE8.

The default is to not print background colors and images, probably to save ink.

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.

How to print webpage with background image?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

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

问如何打印带有背景图片的网页？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印带有背景图片的网页？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印带有背景图片的网页？
EN