css制作水印

使用CSS制作水印

通过CSS可以轻松为网页或图片添加水印效果，以下是几种常见方法：

使用伪元素添加文字水印

通过::after或::before伪元素在目标元素上叠加半透明文字：

.watermark {
    position: relative;
}
.watermark::after {
    content: "机密文件";
    position: absolute;
    opacity: 0.2;
    font-size: 3em;
    color: #000;
    transform: rotate(-45deg);
    z-index: 100;
    pointer-events: none;
    left: 50%;
    top: 50%;
}

背景图片水印

将水印设置为重复背景图案：

body {
    background-image: url("watermark.png");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    opacity: 0.5;
}

动态生成水印

通过CSS变量控制水印内容：

:root {
    --watermark-content: "DEMO";
}
.element::before {
    content: var(--watermark-content);
    /* 其他样式属性 */
}

水印样式增强

添加阴影和混合模式提升效果：

.watermark {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    mix-blend-mode: overlay;
    user-select: none;
}

响应式水印

使用视口单位适应不同屏幕：

.watermark {
    font-size: 5vw;
    left: 10vw;
    top: 30vh;
}

这些方法可根据需求组合使用，通过调整透明度、旋转角度、字体大小等参数获得理想效果。对于图片水印，建议使用PNG透明背景格式。