在每个打印页面上重复水印？ Javascript或CSS
所以，我有这个发票页面。我在页面后面添加了一个水印。我需要为每个要打印的页面重复水印。
问题在于，我不知道会有多少页。可以有任意数量的页面。
我需要在每一页后面显示水印。
这些图片来自Google Chrome的打印模式。
这是页面的HTML。你不需要经历它。这里唯一的一点是，我知道有一个div出现两次。我在javascript中使用它来重复水印。
<div class="content-box pad25A" style="page-break-after: always;">
<div class="row" style="min-height:1000px">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
<div class="row">
<img src="/Images/ProjectImages/Project-Logo.jpg" style="width:100px;height:100px" class="img-circle" />
</div>
</div>
<div class="col-xs-5">
<center>
<div class="row">
<div class="col-xs-12">
<div style="font-size:14px;font-weight:bold;">TIGER INCENSE</div>
</div>
<div class="col-xs-12">
<center>
<div style="font-size:14px;font-weight:bold;">TigerIncenseRAATradersCompany@gmail.com</div>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<address style="font-size:14px;font-weight:bold" class="invoice-address">Pakistan</address>
</div>
</div>
</center>
</div>
<div class="col-xs-4 float-right text-right">
<h4 class="invoice-title">Invoice</h4>No. <b>#52462</b>
<div class="divider"></div>
<div class="invoice-date mrg20B" style="font-weight:500">23 April 2018</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Client information:</h2>
<ul class="reset-ul">
<li><b style="font-weight:bold">Name:</b><span> Sir Fazal-e-Wahid</span></li>
<li><b>Address:</b><span> Peshawar</span></li>
<li><b>Phone:</b><span> 03319090057</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Info:</h2>
<ul class="reset-ul">
<li><b>Date:</b><span> 20 April 2018</span></li>
<li><b>Status:</b> <span class="bs-label label-warning">Delivered</span></li>
</ul>
</div>
<div class="col-xs-4">
<h2 class="invoice-client mrg10T">Order Details:</h2>
<p style="font-weight:600 !important;">Fragrance Sticks for use</p><br>
</div>
</div>
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th class="text-center">Per Piece</th>
<th>Price Per Piece</th>
<th>Price Per Carton</th>
<th>Carton Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 08 Feb 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #7057</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick for Mosquito</td>
<td class="text-center">48</td>
<td>Rs : 100</td>
<td>Rs : 4800</td>
<td>125</td>
<td>Rs : <span class="RowTotal">600000</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 02 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #635</th>
</tr>
<tr>
<td>1</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>20</td>
<td>Rs : <span class="RowTotal">86400</span></td>
</tr>
<tr>
<td>2</td>
<td>China Incense Stick </td>
<td class="text-center">240</td>
<td>Rs : 18</td>
<td>Rs : 4320</td>
<td>28</td>
<td>Rs : <span class="RowTotal">120960</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 26 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #292</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 31 Mar 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #658</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
<tr>
<th colspan="4" style="border: 1px solid black;font-weight:bold">Date : 18 Apr 2018</th>
<th colspan="4" style="border: 1px solid black;font-weight:bold">BuiltyNo : #1902</th>
</tr>
<tr>
<td>1</td>
<td>Crystal</td>
<td class="text-center">70</td>
<td>Rs : 48.57</td>
<td>Rs : 3399.9</td>
<td>34</td>
<td>Rs : <span class="RowTotal">115596.6</span></td>
</tr>
</tbody>
</table>
<center>
<div style="font-size:14px;font-weight:bold">THANK YOU FOR YOUR BUSINESS</div>
</center>
</div>
<br />
<div class="row Signature">
<div class="col-xs-5">
<table class="table mrg20T table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Per Piece</th>
<th>Carton</th>
</tr>
</thead>
<tbody>
<tr>
<td>China Incense Stick </td>
<td>240 </td>
<td>48</td>
</tr>
<tr>
<td>China Incense Stick for Mosquito</td>
<td>48 </td>
<td>125</td>
</tr>
<tr>
<td>Crystal</td>
<td>70 </td>
<td>102</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-7">
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<span style="font-size:16px;font-weight:bold">
NET TOTAL.
<span class="TotalAmount">1154150</span>
</span>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<center>
<span style="font-size:16px;font-weight:bold">
<span class="TotalAmount">Eleven Lakh Fifty-Four Thousand One Hundred And Fifty Rupees Only</span>
</span>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="row Signature">
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Reciever Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>GM. Signature</b>
</center>
</div>
</div>
</div>
<div class="col-xs-4" style="padding:20px">
<div class="row">
<div class="col-xs-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<center>
<b>Proprietor Signature</b>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="content-box pad25A" style="page-break-after: always;">
<center>
<p style="font-size:20px;font-weight:bold">About Our Company</p>
</center>
<div id="row">
<div class="col-xs-12">
<table class="table table-responsive">
<tr>
<td><p style="font-size:16px;font-weight:bold">1</p></td>
<td><p style="font-size:16px;">Tiger Incense fragrence is amazing and unique.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">2</p></td>
<td><p style="font-size:16px;">Use itger insence for fragrence and keep your environment redolence</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">3</p></td>
<td><p style="font-size:16px;">Meterial in tiger insence is very good and the fragrance is very amazing.</p></td>
</tr>
<tr>
<td><p style="font-size:16px;font-weight:bold">4</p></td>
<td><p style="font-size:16px;">If there are any complaints for tiger brand please email or contact us.</p></td>
</tr>
</table>
</div>
</div>
</div>
最后一页是硬编码的，所以我在后面添加了一个水印，使用javascript并通过它重复内容。
这就是我如何重复＆＃34;虎香＆＃34;水印现在
$(function () {
$(".content-box").each(function () {
$(this).after('<div class="watermark">TIGER INSENCE</div>');
});
});
这是水印的css
.watermark {
position: fixed;
opacity: 0.2;
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
font-size: 130px;
margin-top: -700px;
margin-left: -50px;
white-space: nowrap;
}
我想要的是为每个页面重复水印。使用javascript或css或任何有帮助的javascript库。另外Page size总是A4。
2 个答案:
答案 0 :(得分：8)
我会考虑使用背景重叠每个100vh。您只能在使用媒体查询打印时激活此样式。
我使用SVG来简化，您可以轻松地替换为图像。
body {
min-height: 300vh;
position: relative;
margin: 0;
}
body:before {
content: "";
position: absolute;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('data:image/svg+xml;utf8,<svg style="transform:rotate(-45deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">Lorem </text></svg>') 0 0/100% 100vh;
}
答案 1 :(得分：5)
将水印作为背景图像
<style type="text/css" media="print">
.content-box
{
background-image:url('watermarkimage.png');
background-repeat:repeat-y;
background-position: center;
background-attachment:fixed;
background-size:100%;
}
</style>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？