如何给index.html添加水印？
2026-05-04 09:18:46
0浏览
收藏
来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《如何给index.html添加水印？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！
CSS 是实现水印最轻量稳妥的选择，推荐用 body::before 伪元素叠加透明文字层，设 fixed 定位、100%宽高、pointer-events: none，并为打印添加专用 media query 样式。
水印是用 CSS 还是 Canvas 实现？
直接上 CSS 是最轻量、最稳妥的选择。Canvas 虽然灵活，但要处理缩放、滚动、打印、高 DPI 屏幕适配，容易出错，还可能被浏览器拦截或影响可访问性。除非你明确需要动态内容（比如实时插入用户名），否则别碰 Canvas 水印。
核心思路：用 ::before 伪元素在 body 上叠一层带透明文字的背景层，z-index 置顶，pointer-events: none 避免遮挡交互。
常见错误现象：水印文字看不见 → 忘了设 opacity 或 color；水印只在顶部显示一小块 → 忘了设 position: fixed 和宽高 100%；点击按钮失效 → 忘了加 pointer-events: none。
怎么写一个不挡操作、不卡滚动的 CSS 水印？
关键不是“加水印”，而是“加得不干扰”。下面这段可以直接贴进 index.html 的
