CSS pointer-events: none 与网页水印

下面的 CSS 可以创建美观的网页水印：

.watermark {
pointer-events: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999999;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200px' width='200px'><text transform='translate(20, 100) rotate(-30)' fill='rgba(128,128,128,0.15)' font-size='14'>weschiou.site</text></svg>");
background-repeat: repeat;
}

<div class="watermark"></div>

效果如下（在新标签页中打开此示例）：

关键点有两个。一是 pointer-events: none; 可以使顶层的固定定位的元素不影响其他元素的交互；二是我们用 SVG 创建了一个即时的 background-image, 你可以随时调整水印文字的样式和内容。

值得一提的是，rgba(128,128,128,0.15) 是一个非常合适的颜色，使得水印文字可以同时适应深色背景和浅色背景。如果你看不清楚，可以适当调整透明度，但不建议太明显。