html - 在每页上打印一次背景图像

Question

当我打印大的 html 文件时，我需要在每个页面上打印一次背景图像。现在它只打印在第一页上。所以 css 的部分是:

@media all {
    body
    {
        text-align:left;
        background-image:url('/C:/logo.png');
        background-repeat:no-repeat;
        background-position:right top;
    }
}

Answer 1

如果您将 background-attachment 属性指定为固定的，它会呈现在每个页面上。这种方法的唯一问题是内容可以覆盖它的顶部(而且它似乎只适用于 FireFox)。

<style type="text/css" media="print">
    body
    {
        background-image:url('/C:/logo.png');
        background-repeat:no-repeat;
        background-position: right top;
        background-attachment:fixed;
    }
</style>

另一个选项是让你的背景图像共享你的可打印区域的比例(即 Letter 尺寸 8.5x11 纸张，每边边距为 0.5 英寸是 7.5:10)，并将 Logo 放在空白区域(例如http://i.imgur.com/yvVW2mk.png)。然后将图像设置为垂直重复并设置为 100% 大小。

<style type="text/css" media="print">
    body
    {
        background-image:url('/C:/whitespace-logo.png');
        background-repeat:repeat-y;
        background-position: right top;
        background-attachment:fixed;
        background-size:100%;
    }
</style>