我们可以垂直动态地重复添加水印文本作为背景吗？
我们可以垂直动态地重复添加水印文本作为背景吗？
提问于 2015-08-11 07:40:30
我正在创建一个包含销售信息的HTML报告(常规HTML)。我有‘水印’报告的要求与‘待定’的状态。
我已经用下面的代码给报告打上了水印。唯一的问题是，当用户在浏览器中加载报告，然后单击Print时，只有第一页带有水印。每一页都需要加水印，因此我只需要垂直重复加水印。
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+页面很长。因此，水印需要是动态的。
有什么想法吗？谢谢!
回答 1
Stack Overflow用户
发布于 2015-08-11 09:34:20
如果你不能使用外部资源，如svg，背景图像，例如....这是一个管道胶带解决方案。这使用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一大堆次...
参考此堆栈流程，以了解如何在JS中重复后台div a certian数量，这样它就不会像我的示例那样愚蠢：How do I repeat div classes using JavaScript only?
一定要限制你的后台div在javascript中重复的次数，这样它就不会引起问题。
将内容宽度和背景宽度设置为600px，以限制打印页面时调整大小的数量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31930889
复制相关文章
相似问题
腾讯云开发者
