前端水印，类似钉钉水印效果

59 阅读 0 评论 39 点赞

我是靠谱客的博主俭朴枕头，最近开发中收集的这篇文章主要介绍前端水印，类似钉钉水印效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>element-watermark</title>

</head>

<body>
<div class="app">
  <h1>秋风</h1>
  <p>hello</p>
</div>
<script>
  function cssHelper(el, prototype) {
    for (let i in prototype) {
      el.style[i] = prototype[i]
    }
  }
  const waterWrapper = document.createElement('div');
  cssHelper(waterWrapper, {
    position: 'fixed',
    top: '0px',
    right: '0px ',
    bottom: '0px',
    left: '0px',
    overflow: 'hidden',
    display: 'flex',
    'flex-wrap': 'wrap',
    'pointer-events': 'none'
  })
  const waterHeight = 100;
  const waterWidth = 180;
  const { clientWidth, clientHeight } = document.documentElement || document.body;
  const column = Math.ceil(clientWidth / waterWidth);
  const rows = Math.ceil(clientHeight / waterHeight);

  function createItem() {
    const item = document.createElement('div')
    item.innerHTML = '秋风的笔记'
    cssHelper(item, {
      position: 'absolute',
      top: `50px`,
      left: `50px`,
      fontSize: `16px`,
      color: '#000',
      lineHeight: 1.5,
      opacity: 0.1,
      transform: `rotate(-15deg)`,
      transformOrigin: '0 0',
      userSelect: 'none',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
    })
    return item
  }
  for (let i = 0; i < column * rows; i++) {
    const wrap = document.createElement('div');
    cssHelper(wrap, Object.create({
      position: 'relative',
      width: `${waterWidth}px`,
      height: `${waterHeight}px`,
      flex: `0 0 ${waterWidth}px`,
      overflow: 'hidden',
    }));
    wrap.appendChild(createItem());
    waterWrapper.appendChild(wrap)
  }
  document.body.appendChild(waterWrapper)
</script>
</body>

</html>