HTML、CSS、JS实现水印效果

实现效果如下:

HTML、CSS、JS实现水印效果_第1张图片
HTML

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

CSS

  

JS

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

可根据放水印的容器自由变换

你可能感兴趣的:(技术档案,javascript,css,html)