web页面水印实现

s-alone

已于 2022-03-23 11:23:36 修改

阅读量2.1k

点赞数 3

文章标签： javascript html css3

于 2022-03-09 09:09:28 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65937359/article/details/123368564

版权

对于页面水印的实现思路是：

创建一个元素，让他浮在页面最上层，让他有种蒙了一层水印的效果

水印的效果我们可以给这个元素一个背景图(background-image)，背景图就用svg生成。具体实现如下：

创建水印元素让他浮在最上层

<style>
  #water-mark {
       
    height: 100%;
    width: 100%;
    z-index: 999999;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none; // 使元素的所有事件都失效，很关键！
  }
</style>
<div id="water-mark"></div>

编写水印生成工具类

export default class WaterMark {
   
  constructor(elem, options) {
   
    this.elem = elem || document.querySelector('body')
    const defaultOptions = {
   
      text: '文字内容', // 文字内容
      color: '#000', // 文字颜色
      fontSize: 10