css文字水印

CSS文字水印基础概念

类型

固定位置水印：水印固定在页面的某个位置，如左下角或右上角。
滚动水印：水印随着页面滚动而移动，适用于长页面。
全屏水印：水印覆盖整个页面，适用于需要强调版权声明的场景。

应用场景

版权声明：在网站底部或页面上添加版权声明。
网站标识：在页面上添加网站的标识或logo。
重要信息提示：在页面上添加一些重要的提示信息，如“内部使用”或“机密”。

实现方法

以下是一个简单的CSS文字水印示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字水印</title>
    <style>
        .watermark {
            position: fixed;
            top: 10%;
            left: 10%;
            font-size: 2em;
            color: rgba(0, 0, 0, 0.1);
            transform: rotate(-45deg);
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class="watermark">© 2023 MyWebsite</div>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个示例页面。</p>
</body>
</html>

可能遇到的问题及解决方法

水印位置不准确：
- 原因：可能是CSS定位属性设置不正确。
- 解决方法：检查并调整position、top、left等属性的值。

水印颜色或透明度不理想：
- 原因：可能是color或opacity属性设置不当。
- 解决方法：调整color属性中的颜色值或opacity属性的值。
水印覆盖页面内容：
- 原因：可能是z-index属性设置过高。
- 解决方法：适当降低z-index的值，确保水印不会覆盖重要内容。