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

我有一个水印，我需要在PDF的每一页上重复。源文本是my 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>

这类作品：水印显示在PDF的第一页上，但不显示在后续页面上。
如何在每页上显示水印？
我尝试过各种解决方案，但我发现的都是针对浏览器的，没有针对分页媒体。
我知道这可以通过图像水印来实现，但我宁愿使用文本，因为如果文档被翻译，更改文本会容易得多

---

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

我还没有让它工作。
我确实有一个解决办法：我可以将文本放在页面左侧的一个空白框中。当我指定此框的高度和宽度与主体区域重叠时，我可以创建水印效果。

---

这种方法有一个缺点：尽管指定了z-index=-1，水印将放在正文的顶部，而不是下面。这意味着我的文本变得不那么清晰。

如果您使用

位置：fixed

作为水印，您应该能够在Firefox、Opera和Internet Explorer中使用它

Firefox、Opera和Internet Explorer会在每个打印页面上重复使用

位置：fixed

---

不幸的是，在Webkit浏览器（Chrome、Safari）中似乎没有这样做的方法。即使使用

position:fixed

，这些浏览器也只会在第一个打印页面上呈现元素。

这个问题很久以前就被问到了，但我认为最好的答案是使用@page规则处理这个问题

来自W3C：

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

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

@page:right {

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

---

每页的左上角都将包含水印。

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

@page{
@左中{
身高：0；
内容：“草案”；
颜色：#eee；
字号：200pt；
z指数：-1；
变换：旋转（45度）；
左边距：20毫米；
边缘顶部：-140毫米；
}
}

请注意，您还可以通过在中设置来自定义前景中的水印：

---

对于

div

使用

位置：运行（水印）

，并在页面边距框中使用

内容：元素（水印）

。（名字并不重要，只要两个地方的名字都一样。）

---

请看一看页面媒体CSS的

简介

中的制表符是如何完成的，为什么不呢？因为我不确定这是一个错误还是仅仅是一个错误的样式表。对于初学者，如果使用#backgounrd和#watermark，它是一个不合格的ID选择器，它只会影响它“看到”的第一个ID。我可以建议您将其更改为.watermark和.background，并确保每个页面div都具有class=“background”和“watermark”一致最终取决于客户端如何呈现“页面”，在这种情况下，客户端是Antenahouse，因此如果没有此软件，将很难（如果不是不可能的话）帮助您。@Ziv，说得好，但是进入Antenahouse的HTML没有分页符，它只是一个长长的主题列表。Antennahouse决定在何处断开页面（基于类似css的样式中指定pagebreak after=avoid的提示）。是的，这就是我在下面的帖子中提到的解决方法。我没有看到任何示例，因此我将其发布在这里，以解决类似的问题。如果这不是一个解决方案，我不知道你要做什么。我发现如果我把水印放在文本区域，水印会放在文本的顶部，而不是下面。因此，我的文本变得不那么清晰。早在2015年，尽管指定了z-index=-1，水印还是放在正文文本的顶部。这可能是当时最新版本的Antennahouse Formatter中的一个bug，该漏洞已经修复。

@page:right {

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