react 页面加入水印

最新推荐文章于 2024-04-19 15:58:03 发布

wscwj8

最新推荐文章于 2024-04-19 15:58:03 发布

阅读量891

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/wscwj8/article/details/115208390

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

关键css

none 值能阻止点击、状态变化和鼠标指针变化

    pointer-events: none;

关键代码

引入水印组件为：g-mask，npm 自搜，text为数组时，水印的字体会换行
当然重要的还是想法，里面放什么组件或图片不重要
下边做法的好处是，可以放置页面顶层，防止div层级过多被遮住的问题，
如果想让水印居底，将内容置于Mask中

HTML:

<body>
	<div>网页内容</div>
	<div class='water-mask'>
		<Mask
		  className="waterMark-container"
		  text={['我是水印',moment().format('YYYY-MM-DD HH:mm:ss')]}
		  options={{
		      width: 400,
		      height: 100,
		      color: '#000',
		      alpha: 0.1,
		      font: '10px Arial',
		  }}
		>
			...some jsx
		</Mask>
	</div>
</body>

CSS:

	.waterMark-container {
	    height: 100%;
	    width: 100%;
	}
	.water-mask{
		position: fixed;
		pointer-events: none;
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    z-Index: 9999;
	}

wscwj8

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 页面加入水印

关键cssnone 值能阻止点击、状态变化和鼠标指针变化 pointer-events: none;关键代码引入水印组件为：g-mask，npm 自搜，text为数组时，水印的字体会换行当然重要的还是想法，里面放什么组件或图片不重要下边做法的好处是，可以放置页面顶层，防止div层级过多被遮住的问题，如果想让水印居底，将内容置于Mask中HTML:<body> <div>网页内容</div> <div class='water-mask'
复制链接

扫一扫