HTML、CSS、JS实现水印效果

最新推荐文章于 2024-03-22 16:59:35 发布

uglyduckling0412

最新推荐文章于 2024-03-22 16:59:35 发布

阅读量1.1k

点赞数 1

分类专栏：技术档案文章标签： javascript css html

本文链接：https://blog.csdn.net/uglyduckling0412/article/details/126118972

版权

技术档案专栏收录该内容

38 篇文章 1 订阅

订阅专栏

实现效果如下：

在这里插入图片描述
HTML

<body>
  <div class="box" id="box">
  </div>
</body>

CSS

  <style>
    .box {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      border: 2px solid #ccc;
      position: relative;
    }
  </style>

<script>
  function cssHelper(el, prototype) {
    for (let i in prototype) {
      el.style[i] = prototype[i]
    }
  }
  // 获取要放水印的box的宽高以及位置
  const {
    offsetLeft,
    offsetTop,
    clientWidth,
    clientHeight
  } = document.getElementById("box");

  const waterWrapper = document.createElement('div');
  cssHelper(waterWrapper, {
    position: 'fixed',
    width: `${clientWidth}px`, //宽度与box相同
    height: `${clientHeight}px`, //高度与box相同
    top: `${offsetTop}px`, //定位，top
    right: '0px ',
    bottom: '0px',
    left: `${offsetLeft}px`, //定位，left
    overflow: 'hidden',
    display: 'flex',
    'flex-wrap': 'wrap',
    'pointer-events': 'none'
  })
  const waterHeight = 100;
  const waterWidth = 200;
  // 计算有多少个水印
  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: `20px`, //水印字体大小
      color: 'red', //水印的颜色
      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.getElementById("box").appendChild(waterWrapper)
</script>