jquery 文字水印-CFANZ编程社区

jQuery 文字水印 - 实现页面水印效果

在网页开发中，我们经常会遇到需要在页面上添加文字水印的需求，以增加页面的美观性或者标识页面的特定信息。而使用 jQuery 可以很方便地实现文字水印效果。本文将介绍如何使用 jQuery 来实现文字水印，并提供相关代码示例。

什么是文字水印？

文字水印是指将一段透明或半透明的文字覆盖在图像、文档或网页上的一种效果。它通常用于标识文档的状态、保护文档的版权或者美化页面。

使用 jQuery 实现文字水印效果

在开始之前，我们需要确保已经引入了 jQuery 库。可以通过以下方式引入：

<script src="

接下来，我们将使用 jQuery 的 each 方法遍历页面上的所有元素，并为每个元素添加文字水印效果。具体步骤如下：

选择要添加文字水印的元素，例如页面的主体内容区域。
遍历选中的元素。
在遍历过程中，为每个元素创建一个新的 <div> 元素，作为水印容器。
设置水印容器的样式，包括文字内容、字体样式、颜色、位置等。
将水印容器添加到当前元素中。

以下是实现文字水印效果的代码示例：

$(document).ready(function() {
  // 选择要添加文字水印的元素
  var targetElements = $('body');

  // 遍历元素
  $.each(targetElements, function(index, element) {
    // 创建水印容器
    var watermarkContainer = $('<div>').addClass('watermark-container');

    // 设置水印样式
    watermarkContainer.text('Watermark Text');
    watermarkContainer.css({
      'font-family': 'Arial, sans-serif',
      'font-size': '16px',
      'color': 'rgba(0, 0, 0, 0.2)',
      'position': 'absolute',
      'top': '50%',
      'left': '50%',
      'transform': 'translate(-50%, -50%)',
      'pointer-events': 'none',
      'z-index': '9999'
    });

    // 添加水印容器到当前元素中
    $(element).append(watermarkContainer);
  });
});

以上代码首先在页面加载完成后执行，选择了页面的主体内容区域作为添加文字水印的目标元素。然后，通过遍历这些元素，为每个元素创建一个新的 <div> 元素作为水印容器，并设置水印的样式。最后，将水印容器添加到当前元素中。

自定义文字水印样式

可以根据实际需求自定义文字水印的样式。例如，可以修改水印容器的样式属性来改变文字的内容、字体、颜色、位置等。下面是一个自定义样式的代码示例：

watermarkContainer.text('Custom Watermark Text');
watermarkContainer.css({
  'font-family': 'Verdana, sans-serif',
  'font-size': '20px',
  'color': 'rgba(255, 0, 0, 0.5)',
  'position': 'fixed',
  'bottom': '10px',
  'right': '10px',
  'pointer-events': 'none',
  'z-index': '9999'
});