原生 dom版水印

最新推荐文章于 2024-09-11 15:33:18 发布

Mtao&

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量195

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45186619/article/details/140959731

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水印</title>
    <style>
      .sy {
        position: fixed;
        width: 200vw;
        height: 150vh;
        top: -20vw;
        left: -50vw;
        color: gray;
        font-size: 14px;
        opacity: 0.1;
        z-index: 1000000; 
        pointer-events: none; 
        transform: rotate(-20deg); 
      }

      .sy-col {
        display: inline-block;
        padding: 25px 20px;
      }

      .sy-row {
        white-space: nowrap;
      }

      .sy-row:nth-child(2n + 1) {
        transform: translateX(10%);
      }
    </style>
  </head>
  <body>
    <div class="sy">
      
    </div>
    <script>
        let box=document.getElementsByClassName('sy')[0];
        let html='';
        let html2='';
        let text="水印编号"
        for (let i = 0; i < 30; i++) {
            html2 +=`<div class="sy-col">${text}</div>`
        }
        for (let i = 0; i < 30; i++) {
           html +=`
            <div>
                <div class="sy-row">${html2}</div>
            </div>
        `}
        console.log(box);
        box.innerHTML=html;
    </script>
  </body>
</html>