不使用背景图像的水印

Question

我需要转换一个html代码为pdf使用selectpdf web api，其中包含水印图像作为背景图像。但问题是它不能打印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 lib，它可以将水印和图像合并在一起，使它们更安全。一个很棒的库是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>

​