css页面水印

基础概念

CSS页面水印是一种在网页上添加半透明背景图像或文字的技术，用于标识网页的来源或版权信息。水印通常不会干扰用户的主要操作，但可以在一定程度上防止网页内容被非法复制或盗用。

类型

文字水印：使用CSS和HTML在页面上添加半透明的文字。
图像水印：使用CSS和HTML在页面上添加半透明的图像。

应用场景

版权保护：适用于需要保护原创内容的网站，如新闻网站、博客、图片库等。
品牌宣传：适用于希望提高品牌知名度的企业网站。
防篡改：适用于需要确保内容完整性的重要信息展示页面。

示例代码（文字水印）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Watermark</title>
    <style>
        body {
            position: relative;
            overflow: hidden;
        }
        .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            color: rgba(255, 255, 255, 0.2);
            pointer-events: none; /* 确保水印不会干扰用户操作 */
            z-index: 9999; /* 确保水印在最上层 */
        }
    </style>
</head>
<body>
    <div class="watermark">© 2023 MyWebsite</div>
    <h1>Welcome to My Website</h1>
    <p>This is some content.</p>
</body>
</html>

示例代码（图像水印）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Watermark</title>
    <style>
        body {
            position: relative;
            overflow: hidden;
        }
        .watermark {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('watermark.png');
            background-repeat: repeat;
            pointer-events: none; /* 确保水印不会干扰用户操作 */
            z-index: 9999; /* 确保水印在最上层 */
            opacity: 0.2;
        }
    </style>
</head>
<body>
    <div class="watermark"></div>
    <h1>Welcome to My Website</h1>
    <p>This is some content.</p>
</body>
</html>