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之间以确保不影响内容阅读。