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

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>