web应用增加水印

bangleilei

已于 2024-06-20 14:43:42 修改

阅读量178

点赞数 5

分类专栏：水印文章标签：前端 javascript html

于 2024-05-21 17:14:27 首次发布

本文链接：https://blog.csdn.net/banglei123/article/details/139097027

版权

水印专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求背景

当前在做的项目客户那边有需求需要增加水印，防止员工通过截图或者录屏泄露敏感信息，类似企业微信如下图

需求调研

搜了一下实现web应用水印的方案大致分为几类，

1.使用背景图片 repeat

2.使用canvas绘制

3.js计算等

都感觉比较麻烦

功能实现

思路是直接在body下加一个div 在div内循环span 添加水印内容。让当前这个div 处于 index最高层。会出现一个问题最高层的div会遮盖主页面导致页面上的操作失效。解决这个问题可以使用css的 pointer-events: none; 属性，禁止掉div的所有事件。代码如下

演示地址

<!DOCTYPE html>
<html lang="en">
	<head></head>
	<body>
		<div class="box-green">
			<a href="https://www.baidu.com/">跳转到百度</a>
		</div>
		<div class="box-mask" id="box"></div>

		<script>
		let box = document.getElementById('box')
		let html = ''
		for(var i =0; i<100; i++){
			html += '<span>用户张三/XX管理系统</span>'
		}

		box.innerHTML = html
		</script>
		<style>
		.box-green {
			width: 800px;
			height: 300px;
			background-color: green;
		}
		.box-mask{
			position: absolute;
			top:0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: transparent;
			opacity: 0.5;
			/* 取消鼠标事件 */
			
			overflow:hidden;	  
		}
		.box-mask span{
			display: inline-block;
			text-align: center;
			padding-top:20px;
			width:10%;
			height:100px;
			transform:rotate(25deg);
			z-index:999;
		}      
		</style>


	</body>

</html>

bangleilei

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web应用增加水印

思路是直接在body下加一个div 在div内循环span 添加水印内容。让当前这个div 处于 index最高层。会出现一个问题最高层的div会遮盖主页面导致页面上的操作失效。解决这个问题可以使用css的 pointer-events: none;属性，禁止掉div的所有事件。当前在做的项目客户那边有需求需要增加水印，防止员工通过截图或者录屏泄露敏感信息。搜了一下实现web应用水印的方案大致分为几类，1.使用背景图片 repeat。2.使用canvas绘制。
复制链接

扫一扫

专栏目录