当前位置：首页 > CSS

css制作水印

2026-02-27 04:15:24CSS

使用伪元素添加水印

通过::before或::after伪元素在目标元素上叠加水印内容，这种方式不影响原有DOM结构。

.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;
}

背景图片水印

将水印文字转换为Base64编码的图片或使用SVG作为背景，适合需要重复平铺的场景。

css制作水印

body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='20' y='20' font-size='14' fill='rgba(0,0,0,0.1)' transform='rotate(-45)'>WATERMARK</text></svg>");
  background-repeat: repeat;
}

混合模式水印

利用mix-blend-mode属性实现与背景内容的混合效果，适合彩色背景上的水印显示。

css制作水印

.watermark {
  mix-blend-mode: overlay;
  color: rgba(255,255,255,0.5);
  position: fixed;
  font-size: 2rem;
}

动态水印方案

通过CSS变量和JavaScript动态更新水印内容，适合需要程序化控制的场景。

:root {
  --watermark-content: "SAMPLE";
}
.watermark::after {
  content: var(--watermark-content);
}

防止删除的水印方案

结合DOM节点和CSS实现防删除效果，通过重复渲染和事件拦截增加移除难度。

.watermark-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}
.watermark-item {
  opacity: 0.1;
  transform: rotate(-30deg);
  padding: 1rem;
}