对角重复的CSS上的水印文本CSS / HTML和JavaScript

问题描述

如何在HTML和CSS中实现文本上的文本水印（如果可以保持整洁，还可以使用javascript）？

对this earlier question的回答似乎假定前景是单个“ img”。但是我的问题是前景何时是多段文字。背景文字（通常是一个单词“草稿”）应只指定一次并任意重复。

谢谢。

解决方法

最简单的方法是使用具有绝对位置的盒子。然后，您可以将所需的所有物品放在这里。使用RGBA颜色值，您可以将透明度设置得太低，以至于足够透明而不会隐藏实际内容。

.watermark {
  color: rgba(255,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,no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="watermark"><h1>IAM A WATERMARK<h1></div>

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

html javascript watermark