当前位置：首页 > CSS

css制作水印

2026-04-01 03:41:19CSS

使用背景图实现水印

在CSS中，可以通过背景图的方式为页面添加水印。这种方法适用于整个页面或特定元素。

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

PNG格式的水印图片需要提前准备好，通过调整opacity属性可以控制水印的透明度。

使用伪元素创建CSS水印

无需图片，直接使用CSS的伪元素和旋转特性创建文本水印。

.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);
  z-index: 1000;
  pointer-events: none;
}

这种方法适合在特定元素上添加水印，通过调整rgba()中的alpha值控制透明度。

全页面重复水印效果

创建覆盖整个页面的重复水印图案。

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 100px,
    rgba(0, 0, 255, 0.1) 100px,
    rgba(0, 0, 255, 0.1) 200px
  );
  pointer-events: none;
  z-index: 999;
}

使用CSS渐变创建斜条纹水印效果，调整角度和颜色值可改变水印样式。

动态文本水印

通过CSS变量实现可动态修改的文本水印。

css制作水印

:root {
  --watermark-text: "DRAFT";
  --watermark-color: rgba(200, 0, 0, 0.15);
}

body::before {
  content: var(--watermark-text);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 5em;
  color: var(--watermark-color);
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}

这种方法允许通过修改CSS变量值来更新水印内容，无需改动CSS规则。