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属性指定为fixed，则会在每个页面上呈现。这种方法的唯一问题是内容可以剪切到它的顶部（并且它似乎只能在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>

另一种选择是让您的背景图像分享您的可打印区域的比例（即信件尺寸8.5x11纸张，所有边上的0.5英寸边距为7.5：10）并在空白字段中显示徽标（例如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>

Answer 2

请务必在所有页面上包含CSS文件。

<link type="text/css" rel="stylesheet" href="style.css">

在每个页面上打印一次背景图像

2 个答案: