css怎样制作水印
使用伪元素添加水印
通过 ::after 或 ::before 伪元素在目标元素上叠加水印，适合局部区域水印：
.watermark {
position: relative;
}
.watermark::after {
content: "CONFIDENTIAL";
position: absolute;
opacity: 0.2;
font-size: 3em;
color: red;
transform: rotate(-45deg);
z-index: 100;
pointer-events: none; /* 防止干扰交互 */
}全页面固定水印实现
通过固定定位覆盖整个视口，适合全局水印：
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('watermark.png') repeat;
opacity: 0.1;
z-index: 9999;
pointer-events: none;
}动态生成SVG水印
使用CSS背景嵌入SVG实现高清水印：
.watermarked-section {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='20' y='40' transform='rotate(-45 100,100)' fill='rgba(0,0,0,0.2)' font-size='20'>SAMPLE</text></svg>");
}响应式水印控制
通过媒体查询调整水印显示效果：
@media (max-width: 768px) {
.watermark::after {
font-size: 1.5em;
transform: rotate(-30deg);
}
}多元素重复水印模式
使用CSS渐变和背景位置创建重复水印：
.document-page {
background:
linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
repeating-linear-gradient(
-45deg,
transparent,
transparent 100px,
rgba(0,0,255,0.05) 100px,
rgba(0,0,255,0.05) 200px
);
}关键参数说明：
opacity控制透明度（0.1-0.3为佳）transform: rotate设置倾斜角度pointer-events: none确保水印不阻挡操作z-index需高于常规内容但低于弹出层- SVG方案支持自定义字体和复杂图形
