如何在 IE/FF 中添加用于打印的背景图像？答案

【问题标题】：How do you add a background image for printing in IE/FF?如何在 IE/FF 中添加用于打印的背景图像？
【发布时间】：2011-12-31 06:53:30
【问题描述】：

在其他主题中，我发现IE/FF doesn't print background images by default。现在真可惜，因为背景图片增加了一些用经典的<img> 标签很难重现的可能性：

现在，这不是不可能的，但它需要我有不同的 HTML 布局用于打印和普通页面，并且打印布局会相当复杂（因为我必须使用 <table>s 来实现垂直结盟）。此外，CSS sprite 的好处也将丧失。

还有希望吗？我认为@media print 没有帮助，但是否还有其他东西，也许是特定于浏览器的，可以让人们说：“是的，这不是一个正常的背景，它真的需要在那里，即使在打印视图”？

【问题讨论】：

据我所知，这是不可能的，但希望 Stack Overflow 上的人知道一个聪明的技巧。
您打印的是什么？某种报告？
@Paul D. Waite - 因此是关于 SO 的问题。谷歌搜索结果似乎令人沮丧。 :P
@thritydot - 实际上，它是电子商店中的产品页面。产品图片通过 CSS 背景（也用作溢出保护）在“预览”方块中居中，因此它不会显示在打印视图中。但根据我的经验，CSS 背景经常在网页设计中发挥作用，因为它们允许更简单的 HTML 布局。例如，我可以只写<a></a>，而不是<a><img></a>。
+1 好问题，我们很多人终有一天会遇到这种情况。

【解决方案1】：

作为一般规则，背景图片应保留用于添加到页面设计中，但对于理解内容不是必不可少的。因此，在打印页面时它们是否丢失并不重要。如果某些东西（例如产品照片）很重要，那么它应该作为实际图像包含在内（这具有更易于访问的额外好处）。

你能看看包含图像，然后使用 CSS 隐藏它并复制作为背景图像（可能使用 JS 动态）？这样，您可以确保图像本身显示在您的打印样式表中，并获得背景图像带来的好处。我创建了一个非常简单的示例here。

【讨论】：

它作为背景图像存在，因为背景图像提供了额外的功能。如果我将其转换为简单的图像（通过其他方式保持相同的布局），则无需保留背景图像并为切换做额外的工作。很高兴认为您可以在任何有内容的地方使用图像，但只要它们（<img> 和 <background-image>）都提供如此完全不同的功能，它们就不能真正相互替代。跨度>
background-color 更糟，根本没有替代品。您如何建议在没有背景颜色的情况下突出显示打印输出中的内容？
我同意 - 我更多地指出了导致默认不打印 bg 图像的想法（浏览器供应商）。您能否将图像（使用 JS）作为伪元素插入？这不是我能想到的在打印样式表中显示不在 HTML 中的图像的唯一方法。恐怕在涉及精灵的情况下并不能真正为您提供太多解决方案。

【解决方案2】：

不可能。您将不得不了解如何将背景图像转换为 img 或使用 Canvas。当然使用画布取决于你支持哪个 IE。

它是一种限制背景图像打印的浏览器设置。我认为其背后的逻辑是供应商希望为用户提供打印背景图像的选项，并确保 Web 开发人员无法通过某种脚本更改这些设置。

【讨论】：

对我来说似乎是一个特殊的决定。我应该认为这样的事情会破坏大多数当代网页。但我想那将是一种宗教辩论。我仍然认为至少包含一个覆盖选项是有意义的。或者，更好的是 - 尊重在media: print 样式表类型中指定的那些背景图像 - 毕竟，这确实很清楚地表明该页面意味着要使用该特定背景图像打印。
打印背景图片需要大量墨水。用户可以随时选择在设置中打印这些内容。通常，当您打印某些内容时，您需要的是文本而不是背景图像，这会浪费墨水。如果您正在制作一个使用 css 样式表来制作精美内容的应用程序，请包含有关用户如何启用后台打印的说明。