所有页面上的 CSS @page background-images？答案

【问题标题】：CSS @page background-images on all pages?所有页面上的 CSS @page background-images？
【发布时间】：2019-02-04 19:39:01
【问题描述】：

我希望每个打印页面上的背景图像都相同。每当页面因溢出而需要时，它应该具有与前一个相同的背景图像。

我一直在尝试这样做

@page {
    size: US-Letter portrait;
    background-image: url("something.jpg");
    padding: 3in .5in .75in .5in;
}

但这不适用于任何浏览器。这是根本不可能的事情吗？还是我还没有找到更多的技巧？

【问题讨论】：

【解决方案1】：

对于打印，您可能希望使用@media print 媒体查询而不是@page 或将它们组合起来。此外，size 属性似乎没有有效值。

@media print {
  @page {
    size: letter portrait;
    background-image: url("something.jpg");
    padding: 3in .5in .75in .5in;
  }
}

【讨论】：

感谢您关注 size 属性。我认为我不需要将它包装在媒体查询中，因为@page 用于打印：developer.mozilla.org/en-US/docs/Web/CSS/@page 我确实包装它只是为了检查并确认它仍然不起作用。
其实看了@page的描述，好像根本不支持background-images...
我可以确认@page 不支持背景图片

【解决方案2】：

这种完成方式很有效：

@media print {
    body {
        background: url("something.jpg");
    }
}

还要确保您的打印机let you to print a background 的浏览器设置。（在 Firefox 中，它是对话框中的选项选项卡，可让您选择打印机。）

【讨论】：