3

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

4

5 回答 5

2

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

来自 W3C：

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

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

@page:right {

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

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

于 2016-01-18T12:42:32.230 回答
0

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

于 2015-04-03T09:44:29.880 回答
0

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

@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 选项 XML 文件中进行设置来自定义前景中的水印：

<?xml version="1.0"?>
<formatter-config>
  <formatter-settings
      watermark-text="DRAFT" />
</formatter-config>
于 2021-03-29T12:08:58.923 回答
0

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

Firefox、Opera 和 Internet Explorerposition: fixed在每个打印页面上都会重复元素。

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

于 2016-01-16T00:52:37.600 回答
0

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

在https://www.antennahouse.com/cssIntroduction to CSS for Page Media中查看本书中的选项卡是如何完成的

于 2021-05-14T16:08:01.530 回答