在每一页上打印背景图像一次 [英] Print background image on every page once

问题描述

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

I need to print background image on every page once when I print big html file. Now it prints only on the first page. So the part of css for that is:

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

推荐答案

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

If you specify the background-attachment property as fixed, it renders on every page. The only trouble with this method is that content can clip over top of it (and it only appears to work in 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)，并将徽标放在空白区域(例如http://i.imgur.com/yvVW2mk.png).然后，您将图像设置为垂直重复并 100% 大小.

Another option is for your background image to share the ratio of your printable area (i.e. Letter size 8.5x11 paper with .5 inch margins on all sides is 7.5:10) and to have the logo in a field of whitespace (e.g. http://i.imgur.com/yvVW2mk.png). Then you set the image to repeat vertically and be 100% sized.

<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>

这篇关于在每一页上打印背景图像一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！