CSS 使用 HTML 和 CSS 创建水印

在本文中，我们将介绍如何使用 HTML 和 CSS 来创建水印。

阅读更多：CSS 教程

什么是水印？

水印是一种透明的图像或文本，在页面或图像上被放置在背景上的一种特殊效果。它常常用于保护图像的版权和保密性，或者用于在网站上标识内容的来源。

使用 CSS 创建文字水印

要创建文字水印，我们首先需要在 HTML 文件中添加一个容器元素，如 <div>，并为其添加一个类名。然后，我们使用 CSS 选择器来选中这个容器，并为其设置样式。在样式中，我们可以通过设置 background-image 属性来添加一个透明的背景图片，并通过设置 color 属性来设置文字的颜色。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .watermark {
      background-image: url("watermark.png");
      color: rgba(0, 0, 0, 0.3);
      font-size: 50px;
      text-align: center;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="watermark">水印示例</div>
</body>
</html>

在上面的示例中，我们设置了一个名为 watermark 的类，它使用了一个透明的背景图片作为水印，并将文字的颜色设置为半透明的黑色。我们还设置了文字的大小、居中对齐和透明度。

使用 CSS 创建图片水印

要创建图片水印，我们可以直接使用图片作为背景，并设置透明度来实现效果。我们可以使用 background-image 属性来添加图片，并通过设置 opacity 属性来控制透明度。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .watermark {
      background-image: url("watermark.png");
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="watermark"></div>
</body>
</html>

在上面的示例中，我们设置了一个类名为 watermark 的容器，并将背景图片设置为水印图片。通过设置透明度为 0.5，我们可以使水印图像半透明地显示在页面上。

自定义水印样式

你可以根据自己的需求来自定义水印的样式。通过修改样式中的属性值，比如背景图片、文字颜色、字体大小等，你可以创建出不同风格的水印。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .watermark {
      background-image: url("watermark.png");
      color: rgba(0, 0, 0, 0.3);
      font-size: 50px;
      font-family: Arial, sans-serif;
      text-align: center;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="watermark">水印示例</div>
</body>
</html>

在上面的示例中，我们修改了文字的字体为 Arial，并居中对齐。你可以根据自己的需求进行相应的修改。