Html 如何使用css获取要打印的背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5949897/
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 get a background image to print using css?
提问by Techboy
I am using the ASP Net Sprites packageto create CSS Sprites on my website.
我正在使用ASP Net Sprites 包在我的网站上创建 CSS Sprites。
It is working, but the images it generates do not appear when printed.
它正在工作，但它生成的图像在打印时不显示。
The code generated at HTML level is:
在 HTML 级别生成的代码是：
<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>
How can I get the logo image to appear when a user prints the page?
如何在用户打印页面时显示徽标图像？
I have tried adding this in my print.css stylesheet, but it didn't work:
我曾尝试在我的 print.css 样式表中添加它，但它不起作用：
#siteLogo
{
visibility: visible;
}
The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.
print.css 工作正常，它正在按照我希望的方式为页面上的其他元素格式化页面。我唯一的问题是打印时无法显示站点徽标图像。
采纳答案by Kon
It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img />tag.
打印或不打印背景图像取决于用户及其浏览器设置。为了避免依赖它，请将图像直接放入带有实际<img />标签的 HTML 中。
回答by Johann
For Chrome and Safari you can add the following in your CSS:
对于 Chrome 和 Safari，您可以在 CSS 中添加以下内容：
@media print
{
* {-webkit-print-color-adjust:exact;}
}
For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)
不幸的是，对于其他 Web 浏览器，由用户手动选择打印背景图像的选项（例如，对于使用 IE 9、10 和 11 的用户，他们必须单击齿轮图标 -> 打印 -> 页面设置，然后激活该选项)
回答by Charlie
You could have an own media-query for print and use :before selector with the attribute "content".
您可以有一个自己的媒体查询用于打印和使用 :before 具有“内容”属性的选择器。
Put this in the media query and it will insert the image when you try to print:
把它放在媒体查询中，当你尝试打印时它会插入图像：
p:before { content: url(images/quote.gif); }
回答by Hady El-Hady
It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:
当您将 !important 属性添加到背景图像时，它在 Google Chrome 中工作。确保先添加属性然后再试一次，你可以这样做：
.class-name {
background: url('your-image.png') !important;
}
Also you can use these useful printing rules and put them at the end of css file:
您也可以使用这些有用的打印规则并将它们放在 css 文件的末尾：
@media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
回答by Dexter
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
您的主文档将导入 2 个样式表，1 个用于屏幕，另一个用于打印机。您可以根据需要微调媒体设置。
<!DOCTYPE html>
<html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>
Here is the background image called in your main css file used in browsers.
这是在浏览器中使用的主 css 文件中调用的背景图像。
.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
以及当用户启动打印对话框时浏览器使用的打印技巧。因此，您可以将打印类添加到您的 div 并打印出来，或者在需要时将其删除。
.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}
Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.
注意：如果您想避免发出额外的 http 请求，您也可以使用 @media 规则而不是导入文件。
reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
参考来源：http: //www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
回答by ashkufaraz
Try this:
尝试这个：
@media print {
body:before {
content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
position: absolute;
z-index: -1;
}
}
回答by Nasim Bahar
<div style="position: relative;">
<img src="/images/blue.png" style="width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px;">
Hello, world.
</div>
</div>
This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm
这对您发布的 CSS 有意义，另请参阅此网站：https: //defuse.ca/force-print-background.htm
回答by kriti
If you use Internet Explorer, this is how you do it:
如果您使用 Internet Explorer，您可以这样做：
- Go to the 'Tools' menu.
- Click on 'Internet Options'.
- Click on the 'Advanced' tab.
- Put a check on print background color and images.
- 转到“工具”菜单。
- 单击“Internet 选项”。
- 单击“高级”选项卡。
- 检查打印背景颜色和图像。
回答by diEcho
回答by Raj Kumar
When you are trying custom printing through creating print format directly with java script and if there is tag is there then it won't be print because browser intensely send request to printer without waiting to load image in cache. So good practice add image which you want to print on html page and make it visibility false.
当您通过直接使用 java 脚本创建打印格式来尝试自定义打印时，如果有标签，则不会打印，因为浏览器会强烈地向打印机发送请求，而无需等待在缓存中加载图像。因此，好的做法是添加要在 html 页面上打印的图像并使其可见性为 false。
