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

【问题标题】：Creating watermark text in CSS Paged Media在 CSS 分页媒体中创建水印文本
【发布时间】：2021-05-15 00:08:01
【问题描述】：

我有一个水印，需要在 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。

【问题讨论】：

你为什么不contact their helpdesk？
因为我不确定这是错误还是样式表不正确。
对于初学者，如果你使用#backgounrd和#watermark，它是唯一的ID选择器，它只会影响它“看到”的第一个ID。我可以建议你将其更改为 .watermark 和 .background，并确保每个页面 div 有 class="background" 和 "watermark" 一致
最终，如何呈现“页面”取决于客户端，在这种情况下，客户端是 Antennahouse，因此如果没有这个软件，将很难（如果不是不可能）为您提供帮助。
@Ziv，说得好，但是进入 Antennahouse 的 HTML 没有分页符，它只是一长串主题。 Antennahouse 决定在哪里分页（基于 CSS 中的提示，例如指定 page-break-after=avoid 的样式）。

标签： css css-paged-media antenna-house

【解决方案1】：

这个问题是前段时间提出的，但我认为最好的答案是使用@page 规则来处理这个问题。

来自 W3C：

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

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

@page:right {

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

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

【讨论】：

是的，这就是我在下面的帖子中提到的解决方法。
我没有看到任何示例，因此我将其发布在这里以解决类似问题。如果这不是一个解决方案，我不知道你要完成什么。
我发现如果我把水印放在文本区域，水印会放在文本的上面，而不是下面。所以我的文字变得不那么清晰了。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

早在 2015 年，尽管指定了 z-index = -1，但水印仍放置在正文顶部。这可能是当前版本的 Antennahouse Formatter 中的一个错误，该错误已得到修复。

【解决方案5】：

将position: running(Watermark) 用于div，并在您的一个页边距框中使用content: element(Watermark)。（名字无关紧要，只要在两个地方都一样。）

在Introduction to CSS for Page Media 的书https://www.antennahouse.com/css 中查看标签是如何完成的

【讨论】：