修复了打印 CSS 中的背景

Posted 2023-03-06

【中文标题】修复了打印 CSS 中的背景

【英文标题】：Fixed Background in Print CSS

【发布时间】：2021-04-22 23:23:19

【问题描述】：

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

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

你有什么想法吗？

【问题讨论】：

滚动与什么有什么关系？您无法滚动打印的文档...此外，提供一些有关您尝试过的内容的背景会非常有帮助。

【参考方案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 将其定位在其他内容的后面。