如何获得一个背景图像打印使用CSS？
我正在使用ASP Net Sprites软件包在我的网站上创buildCSS Sprites。
它正在工作，但打印时不会显示它生成的图像。
在HTML级别生成的代码是：
<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a> 如何让用户打印页面时出现徽标图像？
我已经尝试在我的print.css样式表中添加这个，但它不起作用：
#siteLogo { visibility: visible; }
print.css工作正常，它正在格式化页面，因为我想要的页面上的其他元素。 我唯一的问题是，当打印网站标识图像时，无法显示。
用户及其浏览器设置可以打印或不打印背景图像。 为了避免依赖这些，请将图像直接放在HTML中，并使用实际的<img />标记。
对于Chrome和Safari，您可以在CSS中添加以下内容：
@media print { * {-webkit-print-color-adjust:exact;} }
对于其他networking浏览器不幸的是，用户可以手动select打印背景图像的选项（例如，对于使用IE 9,10和11的用户，他们必须点击齿轮图标 – >打印 – >页面设置，然后激活选项）
你可以有一个自己的媒体查询打印和使用：之前select属性“内容”。
把它放在媒体查询中，当你尝试打印时它会插入图像：
p:before { content: url(images/quote.gif); }
您的主文档将导入2个样式表，其中1个用于屏幕，另一个用于打印机。 您可以根据需要微调媒体设置。
<!DOCTYPE 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>
这是在浏览器中使用的主要CSS文件中调用的背景图像。
.bg { background: url("http://fpoimg.com/250x250") top left no-repeat; width:250px; height: 250px; }
而当用户启动打印对话框时，浏览器使用的是打印黑客。 所以你可以将打印类添加到你的div，并打印出来，或者如果需要删除它。
.bg.print { display: list-item; list-style-image: url("http://fpoimg.com/250x250"); list-style-position: inside; }
注意：如果您想避免发出额外的http请求，您也可以使用@media规则而不是导入文件。
参考： http : //www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html
set media =“print”
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">
参考
如果您使用Internet Explorer，则可以这样做：
- 转到“工具”菜单。
- 点击“Internet选项”。
- 点击“高级”标签。
- 检查打印背景颜色和图像。
<div style="position: relative;"> <img src="http://img.dovov.comblue.png" style="width: 100px; height: 100px;"> <div style="position: absolute; top: 0px; left: 0px;"> Hello, world. </div> </div>
这是你所发布的CSS的意义，也可以看到这个网站： https ： //defuse.ca/force-print-background.htm
尝试这个：
@media print { body:before { content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg); position: absolute; z-index: -1; } }
当您将！important属性添加到背景图像时，它正在Google Chrome中工作。 确保先添加属性，然后重试，你可以这样做：
.class-name { background: url('your-image.png') !important; }
你也可以使用这些有用的打印规则，并把它们放在css文件的末尾：
@media print { * { -webkit-print-color-adjust: exact !important; /*Chrome, Safari */ color-adjust: exact !important; /*Firefox*/ } }
当您尝试通过直接使用java脚本创build打印格式来进行自定义打印时，如果存在标签，那么它将不会被打印，因为浏览器强烈地向打印机发送请求，而无需等待将图像加载到caching中。 所以好的做法是在html页面上添加要打印的图像，并使其可见性为false。
