Question

我正在使用ASP Net Sprites package在我的网站上创建CSS 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工作正常，它正在格式化页面，因为我想要它用于页面上的其他元素。我唯一的问题是我无法在打印时显示网站徽标图像。

Answer 1

对于Chrome和Safari，您可以在CSS中添加以下内容：

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

对于其他网络浏览器，不幸的是，用户可以手动选择打印背景图像的选项（例如，对于使用IE 9,10和11的用户，他们必须点击cog图标 - ＆gt;打印 - ＆gt;页面设置，并激活选项）

Answer 2

您可以使用自己的媒体查询进行打印和使用：在选择器之前使用属性“content”。

将其放入媒体查询中，当您尝试打印时，它会插入图像：

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

Answer 3

用户及其浏览器设置可以打印或不打印背景图像。为了避免依赖它，请将图像直接放在带有实际<img />标记的HTML中。

Answer 4

您的主文档将导入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

Answer 5

将！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*/
  }
}

Answer 6

试试这个：

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}

Answer 7

设置 media =“print”

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Reference

Answer 8

如果您使用Internet Explorer，则执行以下操作：

转到“工具”菜单。
点击“互联网选项”。
点击“高级”标签。
检查打印背景颜色和图像。

Answer 9

<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>

这可以理解你发布的CSS，也可以看到这个网站：https://defuse.ca/force-print-background.htm

Answer 10

当您通过使用java脚本直接创建打印格式来尝试自定义打印时，如果有标签，那么它将不会被打印，因为浏览器强烈地向打印机发送请求而无需等待在缓存中加载图像。这么好的做法是添加要在html页面上打印的图像，并使其可见性为false。

如何使用CSS打印背景图像？

10 个答案: