php - 使用 CSS 在多循环页面上打印动态文本水印

Question

关于大学系统正在开发中。我应该生成录取通知书，其中每封信都有两页动态对 Angular 线学生姓名。问题是打印水印只出现在一页上，而不是停留在每一页上，但在@media 屏幕上正在实现它。

<style>
@media screen{
#adm #background{
        position:absolute;
        z-index:0;
        display:block;
        height:850px;
        width:78%;
    }
    #adm #watermark{
        color:#f0f0f0;
        font-size:80px;
        transform:rotate(310deg);
        -webkit-transform:rotate(310deg);
    }
    #adm #content{
        position:relative;
        z-index:1;
    }
}

@media print{
#adm #background{
    position:fixed !important;
        z-index:-1;
        text-align:center;
        display:block;
        height:850px;
        width:78%;
        background:gre
    }
    #adm #watermark{

        color:#f0f0f0;
        font-size:70px;
        transform:rotate(310deg);
        -webkit-transform:rotate(310deg);
    }
    #adm #content{
        position:relative;
        z-index:1;
    }
}
</style>
<div id='adm'>
     <div id='background'>
        <div id='watermark'>John Morgan</div>
     </div>
     <div id='content'>Admission content</div>
</div>

我想要循环并打印学生的录取文本水印出现在每封录取通知书的对 Angular 线上。

Answer 1

我认为您需要在打印媒体部分中从顶部开始设置元素的位置，并且您可以根据需要增加该位置。在你的例子中，我设置了 .background CSS top:50%; 并且它在页面中间显示了文本。

如果你将它设置为 top:150%; 它将显示在第二页的中间。

@media print {
  .adm .background{
    position:fixed !important;
        z-index:-1;
        text-align:center;
        display:block;
        height:850px;
        width:78%;
        background:green;
    top:50%;
    }

我为您的要求提供了在线演示，请查看此处。

https://codepen.io/nasser-ali-karimi/pen/MdgGoL