1.创建一个div容器,里面放你想要的内容,一个遍历来循环你的内容
2.css处理,重点position:fixed,z-index:最高值,这时候有个很重要的点,就是pointer-events:none,这个属性让这个最高层级的div容器,失去获取鼠标目标事件,就是触发事件无法作用到这一层,然后给个倾斜角度 transform: rotateZ(-25deg)即可
3.最后一步,遍历的数量处理,
情况1.有写会直接写死数量,动态写死数量,如果页面高度发生变化,水印效果就会发生挤压
所以最好方式应该是动态数量,固定距离
方法:写死距离,利用document.documentElement.clientHeight / distance 可视区域高度除以距离获得动态数量,这样效果出来,不同页面展示不同数量水印,距离保持不变,视觉上就不会产生挤压效果
第三步初始化时候触发你计算水印数量方法,然后最好写个window.onresize监听页面变化再触发该方法