如何在IE / FF中添加背景图像进行打印?

时间:2011-11-17 11:54:21

标签: css internet-explorer firefox printing background-image

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

  • 您可以水平和垂直对齐
  • 如果它们大于目标元素(也可以实现CSS精灵的想法),你可以裁剪它们。

现在,这并非不可能,但它需要我有不同的HTML布局用于打印和普通页面,并且打印布局将非常复杂(因为我将不得不使用<table>来实现垂直对齐)。此外,CSS精灵的好处将会丢失。

有希望吗?我认为@media print没有帮助,但是没有别的东西,也许是浏览器特定的,可以让人说:“是的,这不是一个正常的背景,它真的需要在那里甚至在打印视图中“?

2 个答案:

答案 0 :(得分:1)

不可能。您将需要一些如何将您的背景图像转换为img或使用Canvas。当然使用canvas取决于你支持的IE。

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

答案 1 :(得分:0)

作为一般规则,应保留背景图像以添加到页面设计中,但对于理解内容并不重要。因此,打印页面时是否缺少它们无关紧要。如果某些东西(例如产品拍摄)很重要,那么它应该作为实际图像包含在内(它具有更易于访问的额外好处)。

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