CSS 实现满屏水印|极客教程

CSS 实现满屏水印

在网页开发中，有时候我们希望在页面上添加水印以保护内容的版权，或者为页面增添一些装饰效果。本文将详细介绍如何使用 CSS 实现满屏水印效果。

实现原理

在网页中添加水印效果的基本原理是，利用 CSS 中的伪元素 ::before 或 ::after 来创建一个覆盖整个页面并显示水印内容的元素。通过设置其透明度和字体样式等属性，实现水印效果。

实现步骤

1. 创建 HTML 文件

首先，我们需要创建一个 HTML 文件，用于展示水印效果。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水印页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="watermark">
  水印内容
</div>
</body>
</html>

在上述代码中，我们创建了一个简单的 HTML 结构，包含一个类为 watermark 的 div 元素，用于展示水印内容。

2. 编写 CSS 样式

接下来，我们需要编写 CSS 样式，实现水印效果。创建一个名为 styles.css 的样式文件，并添加以下内容：

body {
  margin: 0;
  padding: 0;
}

.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  font-size: 48px;
  text-align: center;
  color: rgba(0, 0, 0, 0.1); /* 水印内容的颜色和透明度 */
  transform: rotate(-45deg);
  transform-origin: center;
}

在上述样式中，我们设置了水印元素 .watermark 的样式属性，将其固定到页面左上角，并设置宽高为 100%，使其覆盖整个页面。通过设置 z-index: -1 让水印层位于页面内容的下方，通过 pointer-events: none 禁止水印元素响应用户事件。我们还设置了水印的字体大小、颜色和旋转角度等属性，以实现水印效果。

3. 查看效果

将以上两个文件放在同一个文件夹中，并在浏览器中打开 HTML 文件，即可看到满屏水印效果。

进阶效果

除了基本的满屏水印效果，我们还可以对水印进行进一步的定制。

1. 添加背景色

如果希望水印更加醒目，可以为水印元素添加背景色。修改 .watermark 的样式如下：

.watermark {
  /* 其他样式属性 */
  background-color: rgba(255, 255, 255, 0.5); /* 水印背景色及透明度 */
}

2. 使用自定义字体

如果想要使用特定的字体样式作为水印，可以通过 @font-face 导入字体文件，并在样式中引用。示例代码如下：

@font-face {
  font-family: 'WatermarkFont'; /* 自定义字体名称 */
  src: url('watermark.ttf') format('truetype'); /* 字体文件路径及格式 */
}

.watermark {
  /* 其他样式属性 */
  font-family: 'WatermarkFont', sans-serif; /* 使用自定义字体 */
}

3. 动态生成水印内容

有时候需要动态生成水印内容，可以通过 JavaScript 来实现。修改 HTML 文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水印页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="watermark" id="watermark">
</div>
<script>
var watermark = document.getElementById('watermark');
watermark.innerText = '动态生成的水印内容'; /* 设置水印内容 */
</script>
</body>
</html>