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

【问题标题】：How to keep a watermark at the background of a web page?如何在网页背景中保留水印？
【发布时间】：2019-01-30 17:01:26
【问题描述】：

我是一名 pega 开发人员，从不花很多时间在网页上工作。我想创建一个 pdf 。在 Pega 中，它将从 html 页面创建。我需要将水印草稿作为背景？

我尝试了以下代码，但是当我将它包含在我的代码中时，它正在创建为单独的 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>

【问题讨论】：

并保持宽度和高度 100vh 以保持图像在整个页面上，并提供背景位置：中心；和背景大小：包含；你的水印就准备好了
这是基本的尝试，考虑到这个w3schools.com/howto/howto_css_image_text.asp

标签： html css image watermark

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

尝试在 CSS 中设置background-image

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

或在 HTML 中如此

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

【讨论】：

【解决方案3】：

使用 CSS 为主体赋予背景：

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

【讨论】：