关键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;
}
扫一扫
1956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
