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

Question

正在开发大学系统。我本应该生成录取通知书，其中每个字母都有两页，并带有动态的对角线学生姓名。 问题在于，仅在一页上打印水印，而不是停留在每一页上，而在@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>

我想在循环并打印学生的录取文本水印时对角线出现在每个录取信中。

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