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

最新推荐文章于 2025-02-27 20:59:17 发布

小仙女de成长

最新推荐文章于 2025-02-27 20:59:17 发布

阅读量1.6k

点赞数

分类专栏： html以及html5

原文链接：https://juejin.cn/post/6900713052270755847

版权

html以及html5 专栏收录该内容

28 篇文章

订阅专栏

博客围绕类似水印的水印效果展开，但内容缺失，无法获取更多关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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