HTML 添加 文本水印

css 复制代码
    body,
      html {
        margin: 0;
        height: 100vh;
        width: 100vw;
      }
javascript 复制代码
// 自定义文案
      const setting = {
        text: "水印文案", // 水印内容
        innerDate: true, // 在水印下方增加日期
        width: 110, // 水印宽度
      };
      
      // 自定义文字水印
      const watermark = (function () {
        return {
          build: function (arg) {
            // 获取页面宽度
            let maxWidth =
              Math.max(document.body.scrollWidth, window.screen.width) - 20;
            // 获取页面高度
            let maxHeight =
              Math.max(document.body.scrollHeight, document.body.clientHeight) +
              100;
            if (maxHeight === 0) {
              console.info("该页面无需水印");
              return;
            }
            const setting = {
              text: "水印 水印 水印", // 默认水印内容
              beginX: 50, // 默认起始x坐标
              endX: 0, // 默认结束x坐标
              beginY: 50, // 默认起始y坐标
              endY: 0, // 默认结束y坐标
              intervalX: 150, // 默认横向间隔宽度
              intervalY: 100, // 默认纵向间隔高度
              opacity: 0.3, // 字体透明度
              angle: 20, // 字体倾斜度
              fontsize: "15px", // 字体大小
              fontFamily: "微软雅黑", // 字体
              width: 100, // 水印(每个)宽度
              height: 80, // 水印(每个)高度
              innerDate: false, // 是否附带日期
            };
            // 默认变量与自定义变量结合
            if (arguments.length === 1 && typeof arguments[0] === "object") {
              const src = arguments[0] || {};
              for (const key in src) {
                if (!src.hasOwnProperty(key) || !src[key]) {
                  continue;
                }
                for (const def in setting) {
                  if (key === def) {
                    setting[def] = src[key];
                  }
                }
              }
            }
            // 计算列个数
            const cols = parseInt(
              (setting.intervalX + maxWidth - setting.beginX - setting.endX) /
                (setting.width + setting.intervalX) +
                ""
            );
            // 计算行个数
            const rows = parseInt(
              (setting.intervalY + maxHeight - setting.beginY - setting.endY) /
                (setting.height + setting.intervalY) +
                ""
            );
            // 水印内容附加日期
            if (setting.innerDate) {
              const date = new Date();
              setting.text = [
                setting.text,
                "<br>",
                date.getFullYear(),
                "年",
                date.getMonth() + 1,
                "月",
                date.getDate(),
                "日",
              ].join("");
            }
            const fragment = document.createDocumentFragment();
            let x, y;
            for (let i = 0; i < rows; i++) {
              y = setting.beginY + (setting.intervalY + setting.height) * i;
              for (let j = 0; j < cols; j++) {
                x = setting.beginX + (setting.width + setting.intervalX) * j;
                const element = document.createElement("div");
                element.id = "watermark" + i + j;
                // 设置倾斜角
                element.style.MozTransform =
                  "rotate(-" + setting.angle + "deg)";
                element.style.msTransform = "rotate(-" + setting.angle + "deg)";
                element.style.OTransform = "rotate(-" + setting.angle + "deg)";
                element.style.transform = "rotate(-" + setting.angle + "deg)";
                element.style.position = "absolute";
                element.style.left = x + "px";
                element.style.top = y + "px";
                element.style.overflow = "hidden";
                element.style.zIndex = "9999";
                element.style.pointerEvents = "none";
                element.style.opacity = setting.opacity;
                element.style.fontSize = setting.fontsize;
                element.style.fontFamily = setting.fontFamily;
                element.style.color = "#aaa";
                element.style.textAlign = "center";
                element.style.width = setting.width + "px";
                element.style.height = setting.height + "px";
                element.style.display = "block";
                element.innerHTML = setting.text;
                fragment.appendChild(element);
              }
            }
            document.body.appendChild(fragment);
          },
        };
      })();
      watermark.build(setting);

超链接:图片水印

相关推荐
Mintopia2 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼20 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~23 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务25 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛25 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑29 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭35 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿39 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter