疊加層與Prince的平鋪圖像組成
[英]Overlay comprised of tiled image with Prince
問題描述
我有一個文檔，正在使用Prince轉換為PDF。 我想要一個覆蓋層，它將在演示環境中顯示重復的文本，以便可以標記生成的文檔。
通常，我會將這樣的水印與類似
<div id='overlay' style='position: absolute; top: 0; left: 0; background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%;'></div>
但是，Prince不會在分頁符之間分割絕對定位的元素，因此，除第一頁外，水印在任何頁面上都不可見。 建議將水印圖像放在頁邊距框中，然后更改框的位置，以使圖像覆蓋頁面。
我試圖做到這一點以取得部分成功，但是我不明白如何更改頁邊距的位置，以使其覆蓋整個頁面（無法理解這一點）。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
@page { size: A4; margin: 25mm 8mm 27mm 8mm; padding: 0 0 0 0; @top { content: flow(header) } }
body { margin:16mm; padding: 0; }
#overlay { flow: static(header); background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%; }
</style>
</head>
<body>
<div id='overlay'></div>
<p>Lorem ipsum...</p> <!-- multiple instances -->
</body>
</html>
1 個解決方案
解決方案1
0 2016-02-17 17:34:11
在DocRaptor （我們是基於Prince的HTML到PDF服務）中，我們最近做了同樣的事情將水印應用於測試文檔。
這肯定是很hacky，但是我們發現“突破”頁面邊距框的唯一一件事就是一張大圖像。 這似乎是在邊距框外擴展內容的唯一方法，如果Prince在將來的版本中“修復”了這個問題，使黑客無法使用，我也不會感到驚訝。
對於您的示例，這意味着將疊加代碼修改為：
<div id='overlay'><img src='blank.png' width='3000' height='3000'></div>
您需要四處逛逛這些高度和寬度，以得到所需的尺寸。
注意：將此圖像作為覆蓋可能會影響（或可能不會，我不確定）文檔中的鏈接。
我們最終得到如下代碼：
<div id='overlay'>
<img src='blank.png' width='3000' height='3000'>
<div style='position: absolute; bottom: 0; left: 0; top: 0; right: 0; background-repeat: repeat-x; background-image: url(background.png); background-size: 570px 11px; background-position: 0 8px;'></div>
</div>
自適應平鋪的疊加式圖庫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.