网页加水印教程：CSS、HTML、JavaScript实现

在网页上添加水印可以有效地防止内容被盗用，提高网站内容的安全性。以下步骤将详细介绍如何使用 CSS、HTML 和 JavaScript 在网页上添加水印。

使用 CSS 创建水印样式

创建一个 .watermark 样式，定义水印的定位、大小、颜色、透明度等属性，例如：

.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    pointer-events: none;
}

在网页中插入水印

在需要添加水印的元素中插入一个 <span> 标签，将水印内容放在其中，并添加 .watermark 样式，例如：

<div class="content">
    <span class="watermark">Watermark Text</span>
    <!-- other content here -->
</div>

使用 JavaScript 或 jQuery 控制水印显示和隐藏

可以使用 JavaScript 或 jQuery 监听页面滚动事件，当滚动到一定距离时隐藏水印，反之则显示水印，例如：

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
        $('.watermark').fadeOut();
    } else {
        $('.watermark').fadeIn();
    }
});

通过以上步骤，你就可以在网页上添加水印了。需要注意的是，这种方法仅仅是在页面上显示一个水印，不会修改原始图像。如果你需要在图片上添加水印，请使用图像编辑软件来完成。