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

Answer 2

尝试一下

.watermark{
font-size:75px;
position: absolute;
margin: auto;
top:0px;
 transform:rotate(-45deg);
 color:#ccc;
 top:50%;
 transform-origin:bottom bottom;
 z-index:-999;
}

<html>
<head>
  <title>Watermark</title>
</head>
<body>
<span class='watermark'>WATERMARK</span>
<h1>Hello World</h1>
<p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</p>
</body>
</html>

Answer 3

检查此..！希望这对您有帮助

.watermark{
font-size:75px;
position: absolute;
margin: auto;
top:0px;
 transform:rotate(-45deg);
 color:#ccc;
 top:50%;
 transform-origin:bottom bottom;
 z-index: 1000;
    color: #ccc4c4c7;
    margin-top: 60px;
}
img {
height: 500px;
}

<html>
<head>
  <title>Watermark</title>
</head>
<body>
<span class='watermark'>WATERMARK</span>
<img src="https://images3.alphacoders.com/853/thumb-1920-85305.jpg">
</body>
</html>

不使用背景图像的水印

3 个答案:

检查此..！希望这对您有帮助