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)可使水印更具专业感
• 对于重要文档，建议结合服务器端水印生成方案