如何在网页背景上保留水印? [英] How to keep a watermark at the background of a web page?

问题描述

我是一个Pega开发人员，从来没有花很多时间在网页上.我想创建一个pdf.在要从html页面创建的Pega中.我需要保留wate标记草稿作为背景吗?

我尝试了以下代码，但是当我将其包含在我的代码中时，它是作为单独的div创建的，下一个div将出现在下一页?并且草稿也不会出现在背景中间吗?

 < div style ="position:absolute; z-index:0; background:white; display:block; min-height:50％；最小宽度:50％；颜色:黄色；>< p style ="color:steelblue; font-size:120px;"> DRAFT</p></div>  

`

解决方案

这是另一种方法.希望对您有帮助

  div {职位:相对z索引:0；背景:白色；显示:块；最低身高:40％;最小宽度:100％；颜色:黄色；边框:2px纯黑色；高度:200px；}p {margin:0}div:之后{内容:草案"；颜色:钢蓝font-size:120px;/* text-align:center;*/位置:绝对；最高:50％；左:50％；转换:translate(-50％，-50％);不透明度:0.1}  

 < div></div>  

I am a pega developer never spend a lot of time in working on webpage.I want to create a pdf .In Pega that will be created from a html page.i need to keep the wate mark draft as background?

I tried following code but when im including it in my code it is creating as separate div and next divs are coming on the next page?and also the draft is not coming in the background middle ?`

<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>

`

解决方案

This is another way. hope this helps

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>

这篇关于如何在网页背景上保留水印?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！