javascript - 不使用背景图像的水印

Question

我需要使用 selectpdf web api 将 html 代码转换为 pdf其中包含水印图像作为背景图像。但问题是它没有打印 pdf 格式的背景图像。

有没有其他方法可以在不使用背景图像的情况下添加水印效果。请注意，水印需要重复 x 和 y 才能填满页面。水印只是一个变成 30dg 的文本。更喜欢 html/css 最坏的情况可以尝试 javascript。

谢谢

Answer 1

你可以使用绝对定位。

body {
  margin: 0;
}

img {
  max-width: 100%;
}

.wrapper {
  position: relative;
}

.watermark {
  position: absolute;
  color: #fff;
  opacity: 0.6;
}
  .watermark.wm1 {
    top: 15px;
    left: 15px;
  }
  .watermark.wm2 {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
  .watermark.wm3 {
    bottom: 15px;
    right: 15px;
  }
  .watermark.wm4 {
    top: 15px;
    right: 15px;
  }
  .watermark.wm5 {
    bottom: 15px;
    left: 15px;
  }

<div class="wrapper">
  <img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519_1280.jpg" />
  
  <div class="watermark wm1">WATERMARK!</div>
  <div class="watermark wm2">WATERMARK!</div>
  <div class="watermark wm3">WATERMARK!</div>
  <div class="watermark wm4">WATERMARK!</div>
  <div class="watermark wm5">WATERMARK!</div>
</div>

如果这不适合您，您始终可以使用将水印与图像合并的 js 库，以提高它们的安全性。一个很棒的图书馆是 watermark.js