如何给webApp应用添加动态水印?并且不影响页面的交互事件

开发背景:  我们的项目是基于angular  webApp单页面应用,

开发需求:  给页面添加水印,  水印的内容为员工登陆账号,  并且水印不能影响页面的交互事件

开发思路:   外层用一个大的DIV绝对定位到整个屏幕上,   由于手机端的页面大小非常有限,  可以把水印看成一个个div然后再旋转45度角. 

实现思路:   JS后台获取员工登陆账号,  用ng-repeat 绑定到页面div里面. 

视图代码:

<div class="row row-wrap" style="position: absolute;top: 18%;right: 4%;">

<div class="waterMarkHome col col-33" ng-repeat="i in ::waterHomeData"

style="padding-bottom:{{($index > 8)?0 : 30}}%"></div>
</div>

JS 代码: 

$timeout(function () {
$(".waterMarkHome").attr('data-content', masterId);
}, 1000);

var waterHomeData = [];
for (var i = 0; i < 12; i++) {
waterHomeData.push({});
}

最重要的是CSS代码:

.waterMarkHome {
display: block;

width: 100%;
}
.waterMarkHome:after {
pointer-events:none;

content: attr(data-content);

font-size: 18px;

color: rgba(203, 203, 255, 0.5);

z-index: 9999;

display: block;

position: relative;

text-align: center;

line-height: 100%;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}

最后

以上就是孝顺保温杯为你收集整理的如何给webApp应用添加动态水印?并且不影响页面的交互事件的全部内容，希望文章能够帮你解决如何给webApp应用添加动态水印?并且不影响页面的交互事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。