修复了打印 CSS 中的背景

Question

有没有办法将背景图像固定到滚动时的打印媒体查询？

我想将它用于网络打印解决方案。打印的每一页都应包含带有徽标和一些设计内容的 A4 背景。

你有什么想法吗？

Answer 1

听起来您在问如何在每页上使用相同的背景，而不管打印多少页。

如果是这种情况，您可以使用特殊的@page 规则来指定所有打印页面的工作方式。这是Paged Media Spec 的一部分。

@page {
  size: A4;
  margin: 0.25in;
  background: top left URL('myimg.png') no-repeat;
}

但是，大多数浏览器默认不打印背景图片。

有时您可以使用-webkit-print-color-adjust: exact; 取消此默认设置，但请注意这是非标准的，仅适用于 webkit 浏览器。

更好的解决方案（如果图像绝对是打印输出的一部分）可能是在每一页上绝对定位 <img>，然后使用 z-index 将其定位在其他内容的后面。