后台、报表、详情页经常要铺一层字标明谁在看这份页。这版用 jQuery 1.9.1。核心是按页宽页高算出行列每个格子一个 div再旋转、调透明。嵌入项目时按后面「怎么嵌进后台水印带上登录名」那节把 watermark_txt 换成当前登录名。文字水印用到哪些文件jQuery 必须写在 textWatermark.js 前面不然 $ 还没定义。textWatermark.js 包在 $(function () {}) 里放 也会等 DOM 好了再铺。业务就这几个名字后面会反复碰到1、watermark(settings)按配置往页面上铺一层字2、watermark_txt水印文案3、.page-watermark这一整组水印的容器重绘前先拿掉它4、waterOptsonload 和 resize 共用的那份配置行列、间距、倾斜角度怎么配watermark() 先拿页宽页高scrollWidth / clientWidth 取大的当宽高同理。默认行、列都写成 20格子再加间距总宽超过页面就按页宽重算列数和横向间距总高超了就重算行数和纵向间距。列或行写成 0也走这套按页面重算。我第一次看也卡了一下。说白了吧不是先画 20×20 再裁切是先问「这一屏塞得下几列几行」再按算出来的数去铺。窗口窄列就少窗口高行就多。每个格子一个 div文案是 watermark_txt。位置1、第 i 行top watermark_y (watermark_y_space watermark_height) * i2、第 j 列left watermark_x (watermark_width watermark_x_space) * j字要斜着靠 transform: rotate(-Ndeg)N 就是 watermark_angle。本例 15负号表示逆时针。opacity 用 watermark_alpha本例 0.3太实会盖住正文太浅截图上看不清是谁的页。水印在最上层z-index: 9999但格子和容器都写了 pointer-events: none。忘了这句下面按钮全点不了这坑我见过不止一次。user-select: none 也要带上不然字能被选中、复制走。窗口缩放后水印怎么重绘铺的时候先 $(“.page-watermark”).remove()再按当时的页宽页高算一遍行列挂一组新的。load 和 resize 用同一份 waterOpts文案、宽度不要各写各的。说白了旧节点不拿掉每拉一次窗口就叠一层字会越来越黑。resize 很勤必须先清再画。事件用 $(window).on(“resize”, …)别直接写 window.onresize后面要卸掉也好卸。怎么嵌进后台水印带上登录名接入项目时watermark() 不用改只是文案改成当前登录名。先调后端拿用户信息成功后再铺接口挂了可以先铺一句「内部资料」别让页上空白干瞪眼。jQuery 这套建议用 Layui 的 layer.msg 做提示具体按实际项目来定。resize 还是走同一份配置。登录名变了比如切账号再调一次 paintWatermark 就行。接入后端接口的完整示例样式还用原来的 textWatermark.css。接口地址和 res.code 换成项目里的约定。$(window).off(“resize.watermark”) 再 on是怕 paintWatermark 调两次时 resize 叠两份。命名空间 .watermark 只卸自己别把页面上别的 resize 清掉。文案、透明度和角度改哪里1、文案本例 watermark_txt 写成「超级管理员」方便立刻看见效果业务里换成登录名常见是姓名 工号。2、字号本例 50px一打开就看见后台页一般改成 16px20px格子宽 watermark_width 跟着收不然字挤在一起。3、透明度watermark_alpha 本例 0.3。再低截图上看不清是谁的页再高正文难读。4、角度watermark_angle 本例 15。角度太小像一行行正文太大字不好认。5、颜色watermark_color 默认 #000000深色后台改浅灰。6、行列watermark_cols / watermark_rows 写成 0按当前页宽页高自动算。接入时这几处别漏pointer-events: none、重绘前先 $(“.page-watermark”).remove()、load 和 resize 共用一份配置。jQuery 这套建议用 Layui 做提示具体按实际项目来定。 
长河君 · 2026/9/5 3:42:03 · 阅读 1.2k 网页添加文字水印教程
后台、报表、详情页经常要铺一层字标明谁在看这份页。这版用 jQuery 1.9.1。核心是按页宽页高算出行列每个格子一个 div再旋转、调透明。嵌入项目时按后面「怎么嵌进后台水印带上登录名」那节把 watermark_txt 换成当前登录名。文字水印用到哪些文件jQuery 必须写在 textWatermark.js 前面不然 $ 还没定义。textWatermark.js 包在 $(function () {}) 里放 也会等 DOM 好了再铺。业务就这几个名字后面会反复碰到1、watermark(settings)按配置往页面上铺一层字2、watermark_txt水印文案3、.page-watermark这一整组水印的容器重绘前先拿掉它4、waterOptsonload 和 resize 共用的那份配置行列、间距、倾斜角度怎么配watermark() 先拿页宽页高scrollWidth / clientWidth 取大的当宽高同理。默认行、列都写成 20格子再加间距总宽超过页面就按页宽重算列数和横向间距总高超了就重算行数和纵向间距。列或行写成 0也走这套按页面重算。我第一次看也卡了一下。说白了吧不是先画 20×20 再裁切是先问「这一屏塞得下几列几行」再按算出来的数去铺。窗口窄列就少窗口高行就多。每个格子一个 div文案是 watermark_txt。位置1、第 i 行top watermark_y (watermark_y_space watermark_height) * i2、第 j 列left watermark_x (watermark_width watermark_x_space) * j字要斜着靠 transform: rotate(-Ndeg)N 就是 watermark_angle。本例 15负号表示逆时针。opacity 用 watermark_alpha本例 0.3太实会盖住正文太浅截图上看不清是谁的页。水印在最上层z-index: 9999但格子和容器都写了 pointer-events: none。忘了这句下面按钮全点不了这坑我见过不止一次。user-select: none 也要带上不然字能被选中、复制走。窗口缩放后水印怎么重绘铺的时候先 $(“.page-watermark”).remove()再按当时的页宽页高算一遍行列挂一组新的。load 和 resize 用同一份 waterOpts文案、宽度不要各写各的。说白了旧节点不拿掉每拉一次窗口就叠一层字会越来越黑。resize 很勤必须先清再画。事件用 $(window).on(“resize”, …)别直接写 window.onresize后面要卸掉也好卸。怎么嵌进后台水印带上登录名接入项目时watermark() 不用改只是文案改成当前登录名。先调后端拿用户信息成功后再铺接口挂了可以先铺一句「内部资料」别让页上空白干瞪眼。jQuery 这套建议用 Layui 的 layer.msg 做提示具体按实际项目来定。resize 还是走同一份配置。登录名变了比如切账号再调一次 paintWatermark 就行。接入后端接口的完整示例样式还用原来的 textWatermark.css。接口地址和 res.code 换成项目里的约定。$(window).off(“resize.watermark”) 再 on是怕 paintWatermark 调两次时 resize 叠两份。命名空间 .watermark 只卸自己别把页面上别的 resize 清掉。文案、透明度和角度改哪里1、文案本例 watermark_txt 写成「超级管理员」方便立刻看见效果业务里换成登录名常见是姓名 工号。2、字号本例 50px一打开就看见后台页一般改成 16px20px格子宽 watermark_width 跟着收不然字挤在一起。3、透明度watermark_alpha 本例 0.3。再低截图上看不清是谁的页再高正文难读。4、角度watermark_angle 本例 15。角度太小像一行行正文太大字不好认。5、颜色watermark_color 默认 #000000深色后台改浅灰。6、行列watermark_cols / watermark_rows 写成 0按当前页宽页高自动算。接入时这几处别漏pointer-events: none、重绘前先 $(“.page-watermark”).remove()、load 和 resize 共用一份配置。jQuery 这套建议用 Layui 做提示具体按实际项目来定。