如何在网页背景中保留水印？

Question

我是一名 Pega 开发人员，从来没有花很多时间在 webpage.I 上，想要创建一个 pdf。在 Pega 中，将根据 html page.i 需要创建保留水印草稿作为背景？

我尝试了以下代码，但是当我将它包含在我的代码中时，它创建为单独的 div 并且下一个 div 将出现在下一页上？而且草稿也没有出现背景中间 ?`

<div style="position:absolute;z-index:0;background:white;display:block;min-height:50%; min-width:50%;color:yellow;">

<p style="color:steelblue;font-size:120px;">DRAFT</p>
</div>

`

Answer 1

尝试在 CSS

中设置一个 background-image

body {
  background-image: url('https://example.com/image.jpg');
}

或在HTML中如此

<body style="background-image: url('https://example.com/image.jpg');">

Answer 2

使用CSS给正文背景：

body{
  background-image: url('../watermark.png');
  background-size: contain; /* Make background take entire page */
  background-position: center; /* Center Background */
}

Answer 3

这是另一种方式。希望这有帮助

div{
    position: relative;
    z-index: 0;
    background: white;
    display: block;
    min-height: 40%;
    min-width: 100%;
    color: yellow;
    border: 2px solid black;
    height: 200px;
}

p{margin:0}

div:after{
    content: "DRAFT";
    color: steelblue;
    font-size: 120px;
    /* text-align: center; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0.1
}

<div >


</div>

如何在网页背景中保留水印？

How to keep a watermark at the background of a web page?

html

css

watermark

image