Question

我打印一份文件，左上角有一个徽标，左下角有一个页码。

我最初的打印方式是这个

@page {
    margin-top: 40mm;
    margin-bottom: 20mm;
    margin-left: 30mm;
    margin-right: 30mm;

    @top-left {
        content: background-image: url('images/logo.png');
    }

    @bottom-right {
        content: "Pág. " counter(page);
    }
}

但两个徽标都没有出现。这是@page的边缘，有罪吗？

现在我们在此代码段中公开了问题。请看一下。你能帮忙吗？

＆＃13;

window.print();

＆＃13;

@media print{
@page {
        size: A4 portrait
        margin-top: 40mm;
        margin-bottom: 20mm;
        margin-left: 30mm;
        margin-right: 30mm;

        @top-left {
            content: url('http://via.placeholder.com/350x150');
            width: 350px;
            height: 150px;
            background-color: black;
        }
        
        @bottom-right {
          counter-increment: page;
          content: counter(page);
        }
    }

  body  { font: 12pt Arial; }
  p{ text-align: justify }
  h1 { font-weight: 900;
        color: #0a468c;
        padding: 30px 0 20px 0;
        display: block;
    }
}

＆＃13;

<html>
<head></head>
    <body>
        <h1>Title</h1>
        <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non risus elementum, vestibulum nisi non, dapibus nisl. In hac habitasse platea dictumst. Nunc varius sapien id nibh ullamcorper, at luctus est vestibulum. Integer lobortis interdum quam, non iaculis urna dapibus nec. Cras et neque pretium est lobortis egestas ut non elit. Cras eget faucibus nunc. Sed accumsan augue leo, et cursus urna luctus eget. Praesent sit amet enim ultricies, vehicula sem vel, suscipit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mi tellus, volutpat vel euismod sit amet, fringilla ut ante. Sed tempus metus massa, quis mollis ex dapibus et. Quisque eget aliquam nisi. Ut in elit vitae urna lobortis maximus.</p>

<p>Ut ac euismod nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum enim id aliquam bibendum. Integer efficitur, ex eget consequat viverra, velit leo rhoncus massa, ut porta nisi tellus pharetra purus. Morbi id dignissim lectus, sit amet blandit augue. Cras pretium leo vel tellus auctor imperdiet. Donec id faucibus diam. Nullam posuere consectetur tristique. Nullam a rhoncus enim.</p>

<p>Praesent et bibendum metus. Sed volutpat erat sed sapien ultrices congue quis ac arcu. Proin nec porta urna. Aliquam eu mattis augue. Aliquam id velit pellentesque, varius urna pellentesque, sollicitudin tellus. Morbi ornare porttitor enim et convallis. Praesent vitae cursus leo. Cras commodo, metus quis euismod congue, lorem erat bibendum turpis, eget faucibus mi arcu sed tellus.</p>

<p>Vivamus placerat facilisis vestibulum. Nunc malesuada tempor vestibulum. Pellentesque eu pulvinar nulla, at feugiat sapien. Maecenas bibendum dolor quis ex ultrices, non ornare tortor venenatis. Phasellus ac mauris vitae lacus venenatis sagittis in ac nulla. Integer commodo nulla vitae turpis cursus, ut molestie elit sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lacinia risus id sapien placerat, ac convallis nisl vulputate. Aliquam cursus laoreet metus, et pulvinar leo. Pellentesque et nisi quis diam consequat posuere. Nullam eget erat sit amet nibh hendrerit fermentum nec eget tortor. Etiam mollis, ipsum non mollis viverra, metus libero dignissim ex, et rhoncus leo justo vitae lorem. Cras fermentum luctus accumsan.</p>

<p>Curabitur justo ligula, maximus in vehicula id, elementum ut nunc. Quisque ut malesuada ex, sit amet varius sapien. Cras nisl nibh, egestas nec ornare nec, interdum ac dui. Sed tincidunt, nibh et interdum hendrerit, odio mauris mollis metus, quis euismod nulla mi sed velit. Maecenas tincidunt velit nec venenatis finibus. Donec et sem non mauris efficitur sodales et id ante. Mauris id elementum orci. Etiam eu vulputate diam. Pellentesque semper, leo in euismod molestie, sem erat luctus magna, ut bibendum turpis odio porta dui. Mauris justo ipsum, posuere nec viverra et, commodo ac felis. Nullam scelerisque laoreet est ut dignissim. Suspendisse fermentum interdum risus, vel dapibus orci maximus quis. Etiam id quam lacinia, porttitor felis quis, pulvinar enim. Donec maximus blandit pellentesque. Suspendisse et tempus elit.</p>


        </section>
    </body>
</html>

＆＃13;

Answer 1

这是您为screen和print环境使用自定义CSS的方法之一。

我已经构建了示例布局，您可以看到我如何在左上角和右下角放置徽标和计数器。看看这是否可以帮到你。尝试在全屏幕中打开代码片段以查看它是如何工作的，我还在CSS部分添加了注释

＆＃13;

/* CSS for screen  */
@media screen {
  body{
    margin: 4em;
  }

  #logo{
    background: url(http://placehold.it/100);
    width: 200px; height: 200px;
  }

  #numbers{
    position: fixed;
    bottom: 4em; right: 4em;
  }
}
/* CSS for printing */
@media print {
  body{
    margin: 2em;
  }

  #logo{
    background: url(http://placehold.it/100);
    width: 200px; height: 200px;
  }

  #numbers{
    position: absolute;
    bottom: 2em; right: 2em;
  }
}

＆＃13;

<div id="logo">&nbsp;</div>
<div id="numbers">Pág. counter(page)</div>

＆＃13;

用于打印的CSS：@左上角的图像

1 个答案: