当前位置：首页 > CSS

css怎样制作水印

2026-04-01 22:13:08CSS

使用伪元素添加水印

通过 ::before 或 ::after 伪元素在目标元素上叠加水印。设置 content 属性插入文本或图片，通过绝对定位覆盖整个区域。

.watermark {
  position: relative;
}
.watermark::after {
  content: "CONFIDENTIAL";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 48px;
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

背景图片水印

将水印作为重复背景图案，适用于大面积覆盖。使用 background-image 配合 background-repeat 实现平铺效果。

body {
  background-image: url("watermark.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-attachment: fixed;
  opacity: 0.5;
}

半透明文字水印

直接为文本设置低透明度，通过 CSS 控制颜色通道实现视觉穿透效果。推荐使用 RGBA 颜色值调节透明度。

.watermark-text {
  color: rgba(100, 100, 100, 0.2);
  font-size: 72px;
  text-align: center;
  user-select: none;
}

SVG 动态水印

使用内联 SVG 创建可缩放的水印图形，通过 CSS 控制显示属性。这种方法支持复杂图形且保持清晰度。

.svg-watermark {
  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" font-family="Arial" font-size="20" fill="red" opacity="0.2">SAMPLE</text></svg>');
}

固定位置水印

通过 position: fixed 创建不随页面滚动的全局水印，适合需要常显的场景。注意调整 z-index 避免遮挡交互元素。

.fixed-watermark {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: #ccc;
  font-size: 12px;
  z-index: 9999;
}

多重水印效果

组合旋转和平移变换创建密集水印阵列。使用 CSS 变量便于统一调整参数。

css怎样制作水印

:root {
  --watermark-spacing: 150px;
}
.multi-watermark {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent var(--watermark-spacing),
    rgba(0,0,255,0.1) var(--watermark-spacing),
    rgba(0,0,255,0.1) calc(var(--watermark-spacing) * 2)
  );
}

每种方法适用于不同场景，伪元素方案适合局部水印，背景图片适合全页水印，SVG 适合高精度需求。透明度建议控制在 0.1-0.3 之间确保可读性与美观度平衡。