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



在其他主题中,我发现IE/FF默认不打印背景图像。这很遗憾,因为背景图像增加了一些可能性,这些可能性很难用经典的<img>标签重现:

  • 你可以水平和垂直对齐
  • 如果它们比目标元素大,你可以裁剪它们(这也使CSS精灵的想法成为可能)

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

还有希望吗?我收集@media print没有帮助,但是不是有别的东西,也许是浏览器特定的,这将允许一个人说:"是的,这不是一个正常的背景,它真的需要在那里,甚至在打印视图"?

不可能。你必须如何将你的背景图像转换为img或使用画布。当然,使用canvas取决于你所支持的IE。

这是一个限制背景图像打印的浏览器设置。我认为这背后的逻辑是供应商想给用户打印背景图像的选择,并确保web开发人员不能通过某种脚本改变这些设置。

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

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

最新更新