JS 水印|极客笔记

JS 水印

在网页开发中，有时候我们会想要在页面上添加一些水印来保护网页内容的版权或者增加页面的美观度。水印通常是一些透明的文字或图片，铺设在网页上方或背景中的一种视觉效果。而使用 JavaScript 来实现水印效果是一种简单且有效的方式。

本文将详细讲解如何使用 JavaScript 来实现网页上的水印效果。我们将先介绍水印的基本概念，然后讲解如何在网页上动态添加水印，以及如何自定义水印样式、位置等属性。

水印的基本概念

水印是指在图片或文字上添加一些半透明的标识，用于标记其归属、内容或者版权等信息。在网页开发中，水印通常用于显示一些提示信息，或者起到装饰视觉效果的作用。

水印的特点包括：

透明度较高：水印通常有一定的透明度，以便不会完全遮挡底层内容。
居中或平铺：水印可以居中显示在页面上，也可以平铺在整个页面背景上。
文字或图片：水印可以是文字、图片或者组合使用。

在本文中，我们将以文字水印为例，介绍如何使用 JavaScript 来在网页中添加文字水印。

实现的步骤

实现网页水印的主要步骤包括：

创建水印元素：使用 JavaScript 动态创建一个包含水印文本的元素。
设置水印样式：定义水印元素的样式，包括文字大小、颜色、旋转角度等。
将水印元素添加到页面中：将水印元素添加到页面的指定位置，例如页面的背景或者某个元素的上层。

接下来，我们将逐步实现这些步骤，在实例代码中展示如何创建并添加水印元素。

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Watermark</title>
    <style>
        .watermark-text {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: rgba(0, 0, 0, 0.2);
            pointer-events: none;
            z-index: 9999;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="watermark" class="watermark-text">Custom Watermark</div>

    <script>
        window.onload = function() {
            var watermark = document.getElementById('watermark');
            var text = 'Custom Watermark';
            var fontSize = '24px';
            var color = 'rgba(0, 0, 0, 0.2)';

            watermark.innerText = text;
            watermark.style.fontSize = fontSize;
            watermark.style.color = color;

            // Add rotation for better visual effect
            var rotation = -30 + Math.random() * 60;
            watermark.style.transform += ' rotate(' + rotation + 'deg)';
        };
    </script>
</body>

</html>

在这个示例代码中，我们创建了一个包含水印文本的元素，并定义了水印元素的样式，包括字体大小、颜色等属性。水印元素会在页面加载完成后动态添加，并且会在垂直和水平方向上进行一定程度的旋转，以增加视觉效果。