Question

我有一个水印，我需要在PDF的每一页上重复。源文本是我的HTML中的div：

<div id="all"> (outermost container)
     <div id="background">
        <p id="watermark">Internal Use Only - Do Not Duplicate</p>
     </div>
    (more divs with the content of the book)
</div>

在我的CSS中，我有这些声明：

#background {
   position: absolute;
   display: block;
   top: 30mm;
   left: 10mm;
   bottom: 30mm;
   right: 10mm;
   z-index: -1;
   overflow: visible;
}
#watermark {
    color: cmyk(0,0,0, 0.4);
    font-size: 24pt;
    transform: rotate(-45deg);
}

这种作品：水印显示在PDF的第一页上，但不显示在后续页面上如何在每页上显示水印？
我尝试了各种解决方案，但我发现的解决方案都适合在浏览器中使用，并没有解决分页媒体问题我知道这可以通过图像水印完成，但我宁愿使用文本，因为如果例如更改文本则更容易文档被翻译。

我正在使用Antennahouse将HTML + CSS转换为PDF。

Answer 1

这个问题前一段时间被问过，但我认为最好的答案是用@page规则处理这个问题。

来自W3C：

作者可以在“@page”规则中指定页面框的各个方面，例如其尺寸，方向和边距。只要允许规则集，就允许使用“@page”规则。 '@page'规则由关键字'@page'，一个以逗号分隔的可选页面选择器列表和一个声明块（表示在页面上下文中）组成。 '@page'规则还可以包含其他规则，在声明之间交错。此规范的当前级别仅允许'@page'内的边距规则。 read more...

一种解决方案是在样式表中定义@page，并使用css content属性放置水印。例如：

@page:right {

    @top-left{
        content: 'Internal Use Only - Do Not Duplicate';
        font-size: 9pt;
        color: #000;
    }
}

每个页面都会在左上角包含水印。

Answer 2

我还没有这个工作。
我有一个解决方法：我可以将文本放在页面左侧的一个边距框中。当我指定此框的高度和宽度与身体区域重叠时，我可以创建水印效果此方法有一个缺点：尽管指定了z-index = -1，但水印将放置在正文文本的顶部，而不是在正文文本的下方。这意味着我的文字变得不那么清晰了。

Answer 3

如果您使用position : fixed作为水印，则应该能够在Firefox，Opera和Internet Explorer中使用它。

Firefox，Opera和Internet Explorer会在每个打印页面上使用position: fixed重复元素。

不幸的是，似乎没有办法在Webkit浏览器（Chrome，Safari）中执行此操作。即使使用position : fixed，这些浏览器也只会在第一个打印页面上呈现元素。

Answer 4

您可以自定义其中一个页边距框，使其看起来像背景中的水印：

@page {
  @left-middle {
    height: 0;
    content: 'DRAFT';
    color: #eee;
    font-size: 200pt;
    z-index: -1;
    transform: rotate(45deg);
    margin-left: 20mm;
    margin-top: -140mm;
  }
}

请注意，您还可以通过在您的 Antenna House options XML file:

中设置在前景中自定义水印

<?xml version="1.0"?>
<formatter-config>
  <formatter-settings
      watermark-text="DRAFT" />
</formatter-config>

Answer 5

使用 position: running(Watermark) 作为 div，并在其中一个页边距框中使用 content: element(Watermark)。（名称无所谓，只要两处相同即可。）

在 https://www.antennahouse.com/css

的 Introduction to CSS for Page Media 书中查看制表符是如何完成的

在CSS分页媒体中创建水印文本

5 个答案: