页面添加水印效果实现

页面效果：

在这里插入图片描述

源代码：

<div id="water-wrapper"></div>
<div><div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div><div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div><div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div><div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div><div>111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>

jquery版本

function water() {const watermarkText = '水印文字123'; // 水印文字内容const wrap = document.querySelector('#water-wrapper');const html = document.querySelector('html');const body = document.querySelector('body');html.style.margin = "0"html.style.padding = "0"body.style.margin = "0"body.style.padding = "0"wrap.style.width = "100vw"wrap.style.height = "100vh"wrap.style.display = "flex"wrap.style.position = "absolute"wrap.style.zIndex = "999999"wrap.style.flexDirection = "row"wrap.style.justifyContent = "space-around"wrap.style.flexWrap = "wrap"wrap.style.pointerEvents = "none"wrap.style.fontSize = "16px"wrap.style.color = "rgba(184, 184, 184, 0.6)"wrap.style.overflow = "hidden"const wrapWidth = wrap.offsetWidth; // 容器的宽度const wrapHeight = wrap.offsetHeight; // 容器的高度const tempSpan = document.createElement('span');tempSpan.innerText = watermarkText;tempSpan.style.visibility = 'hidden';document.body.appendChild(tempSpan);const watermarkWidth = tempSpan.getBoundingClientRect().width + 160; // 水印文本的实际宽度const watermarkHeight = tempSpan.getBoundingClientRect().height + 120; // 水印文本的实际高度document.body.removeChild(tempSpan);const numCols = Math.floor(wrapWidth / watermarkWidth); // 计算每行可容纳的方格数量const numRows = Math.floor(wrapHeight / watermarkHeight); // 计算可容纳的行数for (let i = 0; i < numRows; i++) {for (let j = 0; j < numCols; j++) {const watermark = document.createElement('div');watermark.classList.add('watermark');watermark.innerText = watermarkText;watermark.style.padding = "60px 80px"watermark.style.transform = "rotate(-45deg)"watermark.style.transformOrigin = "center center"wrap.appendChild(watermark);}}
}
water()