CSS 水印

1. 什么是水印？

“水印”是指在图片或文档上添加一种不影响内容的标记，通常用于防止盗版、保护版权、标记拥有者等目的。在互联网时代，水印也被广泛运用在网页设计中，用于提升页面的美观度和品质感。

2. CSS 实现水印的原理

CSS 实现水印的原理是通过添加背景图片、伪元素或使用背景渐变等技术手段，在页面上呈现出一种透明、轻柔的效果。这样可以在不干扰页面内容的情况下，增加水印的存在感。

3. 使用背景图片实现水印效果

使用背景图片是一种常见的实现水印效果的方式。我们可以通过指定元素的背景图片属性来实现，具体步骤如下：

3.1. 准备水印图片

首先，我们需要准备一个透明、轻柔的水印图片，可以是带有文字或图形的图片。将水印图片保存在项目中，并记住图片的相对路径。

3.2. 创建 HTML 页面

在 HTML 页面中，我们添加一个需要添加水印效果的元素，可以是一个 div 或一个整个页面的容器。

<!DOCTYPE html>
<html>
<head>
    <title>CSS 水印</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="watermark">这是一个水印示例</div>
</body>
</html>

3.3. 创建 CSS 样式表

在 CSS 样式表中，我们通过为元素设置背景图片属性来实现水印效果。

.watermark {
    width: 500px;
    height: 300px;
    /* 设置背景图片及其样式 */
    background-image: url("watermark.png");
    background-size: cover;
    background-position: center center;
    /* 设置背景透明度及重复方式 */
    background-repeat: repeat;
    opacity: 0.5;
}

在上述代码中，我们为 .watermark 类选择器设置了背景图片为 watermark.png，并通过 background-size 和 background-position 属性来控制背景图片的尺寸和位置。同时，我们还设置了背景的透明度为 0.5，以达到水印效果。可以根据需要调整属性值来适应具体的页面布局。

4. 使用伪元素实现水印效果

除了使用背景图片，我们还可以使用伪元素 ::after 或 ::before 来实现水印效果。具体步骤如下：

4.1. 创建 HTML 页面

和上一节一样，我们需要在 HTML 页面中添加一个需要添加水印效果的元素。

4.2. 创建 CSS 样式表

在 CSS 样式表中，我们通过为元素添加 ::after 或 ::before 伪元素，再设置伪元素的背景图片来实现水印效果。

.watermark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 设置背景图片及样式 */
    background-image: url("watermark.png");
    background-size: cover;
    background-position: center center;
    /* 设置背景透明度 */
    opacity: 0.5;
    z-index: -1;
}

在上述代码中，我们为 .watermark 类选择器添加了 ::after 伪元素，并设置了伪元素的 background-image 属性为 watermark.png，通过调整 opacity 属性值来控制水印的透明度。同时，我们还设置了 position: absolute，top: 0，left: 0 等属性值来确保伪元素层叠在被添加水印的元素上方。

5. 使用背景渐变实现水印效果

除了使用背景图片和伪元素，我们还可以使用 CSS 背景渐变来实现水印效果。具体步骤如下：

5.1. 创建 HTML 页面

同样地，我们需要在 HTML 页面中添加一个需要添加水印效果的元素。

5.2. 创建 CSS 样式表

在 CSS 样式表中，我们通过设置元素的背景渐变属性来实现水印效果。

.watermark {
    width: 500px;
    height: 300px;
    /* 设置背景渐变 */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("watermark.png");
    background-size: cover;
    background-position: center center;
}

在上述代码中，我们为 .watermark 类选择器设置了背景渐变属性 background，同时使用 linear-gradient 创建了一个透明度为 0.5 的黑色渐变层。然后，通过设置 url("watermark.png") 来添加水印图片，通过调整 background-size 和 background-position 属性来控制图片的尺寸和位置。