时间戳

首页 > 解决方案 > 使用 CSS 在多循环页面上打印动态文本水印

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

问题描述

关于大学系统正在发展。我应该生成录取信，其中每封信都有两页带有动态对角学生姓名的页面。问题在于打印水印时只出现一页，而不是停留在每一页上，但@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>

我想当循环打印学生的录取文本水印时，每个录取通知书对角线出现。

标签： phpcss

解决方案

我认为您需要从打印媒体部分的顶部设置元素的位置，并且可以根据需要增加元素的位置。在您的情况下，我设置了.backgroundCSS 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

推荐阅读