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

我会带着你远行 2022-12-25 07:58 233阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221120/2144f149e6604540b965005826127012.png