当前位置：首页 > CSS

css怎样制作水印

2026-01-28 18:54:36CSS

使用伪元素添加水印

通过 ::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; /* 防止干扰交互 */
}

全页面固定水印实现

通过固定定位覆盖整个视口，适合全局水印：

css怎样制作水印

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>");
}

响应式水印控制

通过媒体查询调整水印显示效果：

css怎样制作水印

@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
    );
}

关键参数说明：