在每一页上打印一次背景图片 [英] 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属性指定为fixed，它在每个页面上呈现。这种方法唯一的麻烦是，内容可以剪切它的顶部（它只显示在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纸张，所有边上的.5英寸边距为7.5：10），并在空白区域中具有标志（例如 http://i.imgur.com/yvVW2mk.png ）。

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