明水印必须是真实DOM元素而非background-image，否则会被遮挡、不随滚动、缩放变形、打印丢失且无法防搬运；应使用position:fixed+pointer-events:none的全屏div，配合transform旋转、vw字体、动态网格生成及@media print适配。
明水印为什么不能用
直接贴图
直接给
或容器设
加透明 PNG 水印，看似简单，但实际会出问题：水印被内容遮挡、无法随滚动固定、缩放后变形、打印时可能不显示。更关键的是——用户选中文字或截图时，水印根本不在 DOM 里，起不到“明示归属/防搬运”的作用。
真正有效的明水印必须是真实 DOM 元素，层叠在内容上方，且具备一定抗干扰能力。
用
+
实现基础覆盖
最轻量、兼容性最好的方案：创建一个全屏
，用绝对定位铺满视口，再通过 CSS 旋转、重复平铺文字，同时确保不影响用户交互。
必须足够高（如
），但别盲目设
——某些老版 iOS Safari 会失效
是关键，否则所有点击、输入都会被水印层拦截；子元素如需要响应事件，得单独加
文字建议用
而非
，兼容性更稳
字体大小用
单位（如
），比
更适应不同屏幕
动态生成多行水印避免留白断层
单个居中文字在宽屏下左右大片空白，窄屏又挤成一团。更稳妥的做法是用 JS 动态计算行列数，生成网格状水印节点。
立即学习
“
前端免费学习笔记（深入）
”；
核心逻辑：获取视口宽高 → 算出单个水印块的尺寸（比如
）→ 用嵌套循环生成
块并绝对定位。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
不要用
或 innerHTML 拼接大量字符串，性能差且易 XSS；改用
批量创建
每个水印
都要设
，父容器也需设，双重保险
监听
事件重绘水印，但加节流（如 100ms），避免频繁触发
若页面有横向滚动，
应基于
计算，而非
打印时水印消失？加
强制启用
默认情况下，多数浏览器打印预览会忽略
和透明度较低的元素。不显式声明，水印在 PDF 导出或打印时就没了。
必须在 CSS 中补充：
注意：
在这里不是偷懒，而是对抗浏览器打印样式表的默认重置规则。没有它，
在打印上下文中基本失效。
另外，如果页面用了 CSS-in-JS 或 Shadow DOM，水印节点必须挂载到
顶层，否则打印时可能被隔离丢弃。
background-imagebodybackground-imageposition: fixedpointer-events: nonedivz-index99992147483647pointer-events: nonepointer-events: autotransform: rotate(-30deg)rotateZvw8vwpxCONFIDENTIAL200px × 100pxdivdocument.writedocument.createElementdivpointer-events: noneresizeleftdocument.documentElement.scrollWidthwindow.innerWidth@media printfixed@media print {
#watermark {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
opacity: 0.15 !important;
transform: rotate(-30deg) !important;
pointer-events: none !important;
}
}!importantfixeddocument.body