文章目录
近期文章：
- Node.js中那些常用的进程通信方式
- 浅谈微前端沙箱机制
- 实现篇：手把手打造一个番茄时钟
- Vue3响应式原理那些事
- 实现篇：二叉树遍历收藏版
- 实现篇：LRU算法的几种实现
- 从底层视角看requestAnimationFrame的性能增强
- Nginx Upstream了解一下
- 实现篇：一文搞懂Promise是如何实现的
- 一文搞懂 Markdown 文档规则
在数字化时代，网页水印已成为版权保护、信息溯源的核心技术。今天就从明暗水印原理、前后端实现方案、防篡改机制等维度展开解析，结合主流技术实现代码，探讨水印技术的攻防博弈与最佳实践。
1 明水印技术实现
1.1 DOM覆盖方案
通过创建绝对定位的DOM元素覆盖目标区域，利用CSS层级(z-index)和透明度(opacity)控制视觉呈现。此方案支持动态文本注入和样式定制，但存在性能消耗和易篡改的缺陷。
示例代码
<!doctype html>
<html>
<head>
<title>水印测试</title>
<style>
body{
height: 100%;}
</style>
</head>
<body>
<script>
function createDOMWatermark(opt) {
const watermark = document.createElement('div');
watermark.style.position = 'fixed';
watermark.style.top = '0';
watermark.style.left = '0';
watermark.style.width = '100%';
watermark.style.height = '100%';
watermark.style.zIndex = '9999999';
watermark.style.userSelect = 'none';
watermark.style.pointerEvents = 'none';
watermark.style.background = `repeating-linear-gradient(
-${
opt.rotate || 45}deg,
rgba(0,0,0,0.1),
rgba(0,0,0,0.1) 20px,
transparent 20px,
transparent 40px
)`;
watermark.innerHTML = `<div style="
transform: rotate(-30deg) translate(-50%, -50%);
color: ${
opt.color || '#333'};
font-size: ${
opt.fontSize || '24px'};
position: absolute;
opacity: