css制作水印
使用CSS制作水印
方法1：通过伪元素添加水印
利用::before或::after伪元素为元素添加水印背景。这种方式适合为整个页面或特定区块添加水印。
.watermark {
position: relative;
}
.watermark::after {
content: "Watermark Text";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 48px;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
}方法2：使用背景图片
通过CSS的background-image属性添加半透明水印图片，适用于需要复杂水印图案的场景。
body {
background-image: url('watermark.png');
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
opacity: 0.5;
}方法3：多元素覆盖水印
在HTML中创建独立的水印元素，通过CSS定位覆盖在内容上方。适合动态控制水印显示/隐藏。
<div class="content">...</div>
<div class="watermark-overlay">Confidential</div>.watermark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 72px;
color: rgba(0, 0, 0, 0.05);
pointer-events: none;
z-index: 9999;
}方法4：文本阴影水印
通过text-shadow为文字内容直接添加水印效果，适合少量关键文字的水印标记。
.watermarked-text {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1),
-2px -2px 4px rgba(0, 0, 0, 0.1);
}注意事项
- 使用
pointer-events: none确保水印不会干扰页面交互 - 透明度建议设置在0.05-0.2之间以达到最佳可视效果
- 旋转角度(如-45deg)可使水印更具专业感
- 对于重要文档，建议结合服务器端水印生成方案
