index.html

<div id="container">
  <div id="water-mark"></div>
  <div id="content">
    <div>這是內(nèi)容</div>
  </div>
</div>

index.css

#water-mark {
    pointer-events: none; 
    // 元素永遠(yuǎn)不會成為鼠標(biāo)事件的target，解決水印覆蓋在最上方，導(dǎo)致下層元素，無法執(zhí)行鼠標(biāo)事件
}
span {
    display: inline-block;
    width: 200px;
    transform: rotate(-15deg);
    position: absolute;
}

index.js

window.onload = function () {

    let waterMark = document.getElementById('water-mark');

    // MutationObserver  只會監(jiān)聽到內(nèi)聯(lián)樣式的修改， 所以要把可能會導(dǎo)致水印看不見的相關(guān)樣式寫成內(nèi)聯(lián)樣式

    waterMark.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.1);
    `;

    for (let i = 0; i < 8; i++) {

      for (let j = 0; j < 10; j++) {

        let span = document.createElement('span');

        span.innerText = '這是水印';

        span.style.top = 150 * i + 'px';

        span.style.left = 200 * j + 'px';

        span.style.display = 'inline-block';

        span.style.opacity = 1;

        span.style.color = 'rgba(0,0,0,.2)';

        waterMark.append(span)

      }

      // 這里與上方設(shè)置內(nèi)聯(lián)樣式不一致，是為了讓自己方便記憶兩種設(shè)置的方法

    }
    const config = {childList: true, subtree: true, attributeFilter: ['style']};

    const callback = function (mutationsList) {

      for (let mutation of mutationsList) {

        if (// 這個if是判斷這三種情況是修改了跟水印相關(guān)的DOM元素，其他的都是跟水印無關(guān)的

          mutation.target.id === 'water-mark' // 改變的DOM樣式屬性的是id為water-mark的元素

          || (mutation.removedNodes[0] && mutation.removedNodes[0].id === 'water-mark') // 裝載水印的DOM被移除

          || mutation.target.offsetParent.id === 'water-mark' // 修改的當(dāng)前元素是water-mark的子元素

        ) {

          console.log('水印被動了， 這里可以執(zhí)行一下水印被動了之后的邏輯');

          if (mutation.type === 'childList') {

            console.log('A child node has been added or removed.');

          } else if (mutation.type === 'attributes') {

            console.log('The ' + mutation.attributeName + ' attribute was modified.');
          }
        }
      }
    };
    const observer = new MutationObserver(callback);

    //MutationObserver 只會監(jiān)聽子元素的刪除，監(jiān)聽不到本身， 所以要添加的父元素上進行監(jiān)聽

    let container = document.getElementById('container');

    observer.observe(container, config);
  };

這是我當(dāng)初做這個需求是遇到的問題，后來在高人的指點下解決了，為了加深自己的印象和今后方便回憶，就專門自己實現(xiàn)了一下，如果大家發(fā)現(xiàn)有什么地方不正確或者有更好的方法實現(xiàn)，歡迎大家留言區(qū)留言。