Question

我正在创建一个包含销售信息的HTML报告（常规HTML）。我要求“水印”报告具有“待定”状态。

我已使用以下代码为报告加水印。唯一的问题是当用户在浏览器中加载报表然后单击“打印”时，只有第一页被加水印。每个页面都需要加水印，因此我只需要垂直重复水印。

CSS

#background{
    position:absolute;
    z-index:0;
    background:white;
    display:block;
    min-height:50%; 
    min-width:50%;
    color:yellow;
}

#content{
    position:absolute;
    z-index:1;
}

#bg-text{
    color:lightgrey;
    font-size:120px;
    transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
}

HTML

<body>
    <div id="background">
        <p id="bg-text">Pending Sale</p>
    </div>
</body>

不幸的是，系统不支持使用外部图像作为背景。我有适合1页的报告，以及10多页长的其他报告。因此，水印需要是动态的。

有什么想法吗？谢谢！

Answer 1

如果你不能使用像svg这样的外部资源，那么背景图像，ex ....这里是一个管道胶带解决方案。这使用Javascript，没有Jquery，因为它需要加载外部资源。

基本上，脚本占用#content div（包含所有内容）的高度，并将其分配给#background。设置背景div，使其不会溢出内容。

<style> 
#background{
    position:absolute;
    z-index:-1;
    background:white;
        width: 600px;
    color :yellow;
    overflow: hidden;

}

#content{
    position:absolute; 
    width: 600px;
}

.bg-text{

    color:lightgrey;
    font-size:120px;
    transform:rotate(300deg);   
    -webkit-transform:rotate(300deg);
    padding-bottom: 200px;
    padding-left: 100px;


}</style>

Javascript：

<script language="javascript">
function oncode(){

    var clientHeight = document.getElementById('content').clientHeight;
     document.getElementById("background").style.height = clientHeight + 'px';
}

</script>

加载脚本:(将其放在文档的末尾）

<script>
//call after page loaded
window.onload=oncode ; 
</script>

您的文件：

 <div id="background">
        <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p> <p class="bg-text">Pending Sale</p>
    </div>
    <div id="content">
   Listing stuff

重复待定的销售div一大堆......

请参阅此stackover流程，了解如何在JS中重复backround div一个certian数量，这样就不像我的例子那样狡猾：How do I repeat div classes using JavaScript only?

确保限制你的背景div在javascript中重复的次数，这样就不会引起问题。

将内容宽度和背景宽度设置为600px，以限制打印页面时调整大小的数量。

我们可以重复垂直和动态水印文本作为背景吗？

1 个答案: