基于css的mix-blend-mode属性生成水印效果，不遮挡文本及点击事件

本文链接：https://blog.csdn.net/m0_47587616/article/details/138961913

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .test {
        /* 设置全屏宽高，覆盖于页面上方 */
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        opacity: 0.8;
        /* 生成的图片是有一张，开启repeat自动填充 */
        background: repeat;
        pointer-events: none;
        /* 核心部分，决定水印层与内容部分的结合方式 */
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <div class="test"></div>
    <div>
      asdasd asd as dasd 
      asda sd asd
      <br />
      dasdasdasdasd
      brasdasdasdasd
      <br />
      dasdasdasdasdasdasd
      <a href="#">asdasdasdads</a>
    </div>
  </body>
  
  <script>
  	// 	水印显示文本
    const testName = '我是一条水印'
    // 通过canvas将文本生成图片
    const canvas = document.createElement('canvas')
    canvas.width = testName.length *16 * 2
    canvas.height = testName.length *16
    const ctx = canvas.getContext('2d')

    ctx.font = '16px PingFangSC'
    ctx.textAlign = 'center'
    ctx.fillStyle = '#EEEEEE'
    // 设置倾斜角度
    ctx.rotate(-30 * Math.PI / 180)
    // 调整偏移量，让文本完整显示
    ctx.translate(-50, 30)
    ctx.fillText(testName, 100, 58)
    // 将canvas转为base64图片
    const url = canvas.toDataURL()
    
    document.querySelector('div').style = `background-image: url(${url})`
  </script>
</html>

演示

在这里插入图片描述