水印文本对角重复 css/html

Question

如何使用 css/html 实现以下水印文本（“howbloggerz”）？

原文由 Captain Obvious 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

设置容器的大小并使用绝对定位浮动文本，同时使用旋转 转换 文本。

 #watermark {
  height: 450px;
  width: 600px;
  position: relative;
  overflow: hidden;
}
#watermark img {
  max-width: 100%;
}
#watermark p {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 18px;
  pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}

 <div id="watermark">
  <img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
  <p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
</div>

注意： 对于重复文本，我建议使用 JavaScript 或 jQuery。

原文由 Daerik 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这与 Daerik 的回答非常相似，但我想避免使用额外的元素，并自动生成水印文本。

 document.querySelectorAll('.watermarked').forEach(function(el) {
  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
});

 .watermarked {
  position: relative;
  overflow: hidden;
}

.watermarked img {
  width: 100%;
}

.watermarked::before {
  position: absolute;
  top: -75%;
  left: -75%;

  display: block;
  width: 150%;
  height: 150%;

  transform: rotate(-45deg);
  content: attr(data-watermark);

  opacity: 0.7;
  line-height: 3em;
  letter-spacing: 2px;
  color: #fff;
}

 <div class="watermarked" data-watermark="howbloggerz">
  <img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

原文由 Gerrit0 发布，翻译遵循 CC BY-SA 4.0 许可协议