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

最新推荐文章于 2025-06-26 11:09:47 发布

zhenqin_Cai

最新推荐文章于 2025-06-26 11:09:47 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhenqin_Cai/article/details/74736022

本文介绍如何在Angular单页应用中实现不影响交互的水印效果，通过使用div元素结合CSS样式和JavaScript动态填充内容完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发背景: 我们的项目是基于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;
}