css怎样制作水印
使用伪元素添加水印
通过 ::before 或 ::after 伪元素在目标元素上叠加水印。设置绝对定位、透明度及重复背景。
.watermark {
position: relative;
}
.watermark::after {
content: "水印文字";
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
font-size: 40px;
color: #cccccc;
pointer-events: none;
transform: rotate(-30deg);
}背景图片实现水印
将水印文字转换为半透明的PNG图片，通过CSS背景属性重复平铺。
body {
background-image: url("watermark.png");
background-repeat: repeat;
background-position: center;
}SVG动态水印
使用内联SVG创建可动态调整的水印，通过Base64编码嵌入CSS。
.element {
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" fill="rgba(0,0,0,0.1)" font-size="20" transform="rotate(-30)">Watermark</text></svg>');
}固定全屏水印方案
创建覆盖整个视口的固定水印层，适合需要全局水印的场景。
body {
position: relative;
}
.watermark-layer {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
pointer-events: none;
}
.watermark-item {
opacity: 0.1;
transform: rotate(-15deg);
padding: 30px;
}响应式水印调整
通过CSS变量和视口单位实现水印大小自适应。
:root {
--watermark-size: 5vw;
}
.watermark {
font-size: var(--watermark-size);
opacity: calc(var(--watermark-size) * 0.02);
}每种方法适用于不同场景，伪元素方案适合局部水印，SVG方案适合需要精确控制的情形，全屏方案则适用于文档保护。透明度建议保持在0.1-0.3之间以确保不影响内容阅读。
