方法一
最容易想的是用绝对布局或者fixed布局，写一串文字放在整个body或者content容器里面，贴在最上层即可。但是遇到了问题：，就是因为z-index设置的比较高，无法交互。 下面的点击事件啥的，全部失效了。
最后查到了css3有一个新属性： 这个CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
当设定为none的时候，元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
也就是说我们将这个水印层的pointer-events属性设置为：none 就完成了我们想要的效果。
方法二
第一种方法，我们使用svg生成一张图片，然后作为body或者content-container的背景即可。但是如果作为背景的话，子元素不能有自己的背景或者颜色[透明色可以]。所以结合第一种方法来，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水印处理</title>
<style type="text/css">
header {
height: 50px;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.water-mark {
position: fixed;
left: 0;
top: 50px;
right: 0;
bottom: 0;
z-index: 99999;
pointer-events: none;
}
</style>
</head>
<body>
<div class="water-mark">
</div>
<header>
<h3>加水印-当前时间和名字</h3>
</header>
<div class="content">
<div class="text-wrapper">
<span>这里是内容区</span>
</div>
</div>
<script typee="text/javascript">
let name = 'Kevin'
let date = '2019-11-20'
var background = "url(\"data:image/svg+xml;utf8,"+
"<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='130' width='130'>" +
"<text text-anchor='middle' transform='rotate(-20)' font-weight='bold' fill='rgba(221, 221, 221, .7)' font-size='14' >" +
"<tspan x='50' y='50'>"+ name +" </tspan>" +
"<tspan x='50' y='65'>"+ date +" </tspan>" +
"</text>"+
"</svg>\")";
let domObj = document.getElementsByClassName('water-mark')[0]
domObj.style.backgroundImage= background;
</script>
</body>
</html>
