js 页面加水印

js 页面加水印

div 代码
<div class="watermark"></div>

js代码
 <script type="text/javascript">
        /*水印*/
        $(document).ready(function(){
            var $waterMarkHtml = '<p>'+loginName+'</p>';

            for (var i = 0; i < 54; i++) {
                $('.watermark').append($waterMarkHtml);
            }
        });

    	var basePath = "${base}";
    	var loginName = '${username}';//登录账号
    </script>

css样式
/* 水印  */
.watermark {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  z-index: 10;
  padding-left: 40px;
  padding-top: 40px;
  user-select: none;
  pointer-events: none;
}
.watermark p {
  display: inline-block;
  transform: rotate(-45deg);
  color: #c7cdda;
  width: 164px;
  height: 120px;
  letter-spacing: 2px;
  font-size: 14px;
}
.watermark p span {
  color: inherit;
}