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

Question

我正在使用ASP Net Sprites包在我的网站上创建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图标 - >打印 - >页面设置,然后激活选项)

Answer 2

您可以拥有自己的媒体查询以进行打印和使用:在选择器之前使用属性"content".

将它放在媒体查询中,它会在您尝试打印时插入图像:

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

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

Answer 3

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

Answer 4

当您将 !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*/
  }
}