DOM PDF在文本较小时剪切水印背景

Question

我在页面上有一个水印bg，并且文本结束时该图像被切断。如果我在页面上写的文本大于图像，则它可以工作，否则图像会在文本结束处被截断。 有任何想法吗？ 感谢。

body  { width: 100%; min-height: 800px }
#container { margin:0 auto !important; width: 750px; overflow: hidden; }
* { font-family: 'Times New Roman' !important; font-size : 14px !important; text-decoration: none !important; margin : 0px;}

#container { width: 100%; }

#watermark { position: fixed; width: 382px; height: 470px; margin-left: 120px; margin-top: 190px; opacity: .07; }

@page {
  margin-left: 3cm !important;
  margin-top: 3cm !important;
  margin-right: 2cm !important;
  margin-bottom: 2cm !important:
}

<div id='container'>

  <div id='watermark'><img src='http://placehold.it/1024x768' height='100%' width='100%' /></div>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
</div>

Answer 1

我不确定错误发生在哪里，但#watermark元素似乎被剪裁到#container对象的大小，即使它被position: fixed设置为样式，它应该会超出正常范围文件的流程。

最简单的解决方法是将#watermark元素移到#container元素之外。

body  { width: 100%; min-height: 800px }
#container { margin:0 auto !important; width: 750px; overflow: hidden; }
* { font-family: 'Times New Roman' !important; font-size : 14px !important; text-decoration: none !important; margin : 0px;}

#container { width: 100%; }

#watermark { position: fixed; width: 382px; height: 470px; margin-left: 120px; margin-top: 190px; opacity: .07; }

@page {
  margin-left: 3cm !important;
  margin-top: 3cm !important;
  margin-right: 2cm !important;
  margin-bottom: 2cm !important:
}

<div id='watermark'><img src='http://placehold.it/1024x768' height='100%' width='100%' /></div>

<div id='container'>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
  <p>t</p>
</div>