CSS 使用CSS添加“水印”效果

在本文中，我们将介绍如何使用CSS来添加“水印”效果。水印是一种常见的设计元素，可以在网页背景或图片上以透明的方式添加一些文本、图标或其他元素，以增加视觉效果或版权保护。

阅读更多：CSS 教程

什么是水印效果

水印效果最早被应用于纸质文件中，类似于透明的图案或文字，用以标记文档作者或版权信息。在网页设计中，水印可以被应用在页面背景、图片上或者其他需要强调版权信息或者视觉效果的元素上。

使用背景图片添加水印效果

一种简单的方法是使用CSS的background-image属性。我们可以在网页背景上添加一个具有透明度的图片作为水印。下面是一个例子：

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

在上面的例子中，我们使用了一个名为watermark.png的背景图片。通过设置背景图片的重复方式，我们可以让水印在整个页面上重复出现。通过调整透明度属性，我们可以控制水印的可见度。

使用伪元素添加水印效果

除了使用背景图片，我们还可以使用CSS的伪元素来添加水印效果。通过在文本元素上创建一个伪元素，并在其中插入水印内容，我们可以实现更灵活的水印效果。下面是一个例子：

.watermark::before {
  content: "Watermark";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0.5;
}

在上面的例子中，我们创建了一个带有.watermark类的元素，并使用::before伪元素在其中添加水印。通过设置内容属性，我们可以在伪元素中插入水印的文本。通过调整位置和样式属性，我们可以自定义水印的位置、字体大小和透明度。

使用SVG添加水印效果

另一种添加水印效果的方法是使用SVG（可伸缩矢量图形）。SVG是一种标记语言，可以用于创建矢量图形，它具有跟随网页缩放而不失真的优势。下面是一个使用SVG作为水印的例子：

.watermark {
  position: relative;
  width: 100%;
  height: 100%;
}

.watermark::before {
  content: "";
  background-image: url('watermark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

在上面的例子中，我们创建了一个带有.watermark类的元素，并使用::before伪元素来放置SVG图像作为水印。通过设置背景图像的属性，我们可以控制SVG图像在元素内的位置和大小。通过调整透明度属性，我们可以设置水印的可见度。

使用CSS滤镜添加水印效果

CSS滤镜是CSS3引入的一种功能，可以对元素进行各种视觉效果的处理。其中，透明度和模糊效果是实现水印效果的常用滤镜。下面是一个使用CSS滤镜添加水印效果的例子：

.watermark {
  position: relative;
}

.watermark::before {
  content: "Watermark";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0.5;
  filter: blur(10px);
}

在上面的例子中，我们创建了一个带有.watermark类的元素，并使用::before伪元素来添加水印。通过设置内容属性，我们可以在伪元素中插入水印的文本。通过调整位置、样式和滤镜属性，我们可以自定义水印的位置、字体大小、透明度和模糊效果。