在文本上按对角线重复css/html(和javascript)的水印文本



如何在HTML和CSS中实现文本对文本水印(以及javascript,如果这样可以保持它更干净(?

这个早期问题的答案似乎假设前景是一个单一的";img";。但我的问题是前景何时是多段文本。背景文本通常是一个单词";Draft";,应该只指定一次并任意重复。

谢谢。

实现这一点的最简单方法是使用具有绝对定位的方框。你可以把你想要的任何东西都放在那里。使用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的字符串转发器。使用字符串中继器这个术语,你应该能找到足够多的指南和例子。

最新更新