水印文本对角重复 css/html（和 javascript）

Question

如何在 HTML 和 CSS 中实现文本上的文本水印（以及 javascript，如果这样可以保持更简洁）？

this earlier question 的答案似乎假设前景是单个“img”。但我的问题是前景是多段文本时。背景文本，通常是一个单词“Draft”，应该只指定一次并任意重复。

谢谢。

Answer 1

实现这一点的最简单方法是使用具有绝对定位的框。你可以在那里放置你想要的所有东西。使用 RGBA 颜色值，您可以将透明度设置得很低，使其足够透明而不会隐藏实际内容。

.watermark {
  color: rgba(255, 0, 0, 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="watermark"><h1>IAM A WATERMARK<h1></div>

要重复该文本，您可以将其用作字符串并在 JS 中使用字符串重复器。使用术语字符串中继器，您应该可以找到足够多的指南和示例。