HTML、CSS、JS实现水印效果

最新推荐文章于 2024-07-09 09:00:05 发布

uglyduckling0412

最新推荐文章于 2024-07-09 09:00:05 发布

阅读量1.1k

点赞数 1

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

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

版权

本文介绍如何利用HTML、CSS和JavaScript技术实现动态水印效果，该效果能够在容器内自由调整，适用于不同场景。

摘要由CSDN通过智能技术生成

实现效果如下：

在这里插入图片描述
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,