📌  相关文章
📜  html5 中的水印 - Html (1)

📅  最后修改于: 2023-12-03 14:41:58.209000             🧑  作者: Mango

HTML5 中的水印

HTML5 提供了多种方式来实现水印效果，本文将介绍其中几种常用的实现方法。

通过 CSS 实现水印效果

可以通过 CSS 中的 ::before 伪元素来实现水印效果，具体步骤如下：

  1. 创建一个带有 position: relative 样式的元素，例如 body。
  2. 使用 ::before 伪元素来添加水印，设置 position: absolute 和 z-index 属性，以便将水印覆盖在页面内容之上。
  3. 在 ::before 中添加水印的样式，可以是文字或图片。

下面是一个示例代码片段：

body {
  position: relative;
}

body::before {
  content: "Watermark";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 3em;
  color: rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

以上代码中，使用 content 属性添加水印内容， top 和 left 属性将水印置中， transform 属性实现水平和垂直居中， font-size 属性设置字体大小， color 属性设置水印颜色及透明度， z-index 属性设置层级。

通过 Canvas 画布实现水印效果

Canvas 画布可以绘制各种形状的图形和文字，可以通过以下步骤来实现水印效果：

  1. 创建一个带有 position: relative 样式的元素，例如 body。
  2. 创建一个 canvas 元素，并将其添加到页面中。
  3. 在 canvas 上通过 fillText 方法绘制水印的文字内容。

下面是一个示例代码片段：

<body style="position: relative;">
  <canvas id="watermark" style="position: absolute; top: 0; left: 0; z-index: 9999;"></canvas>

  <script>
    var canvas = document.getElementById('watermark');
    var ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.font = "30px Arial";
    ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Watermark", canvas.width / 2, canvas.height / 2);
  </script>
</body>

在以上代码中，使用 canvas 元素创建一块画布，并用 getContext 方法获取一个 2D 绘图环境，使用 fillText 方法在画布上绘制水印，设置文字样式和颜色，以及对齐方式和基线位置。

通过 SVG 实现水印效果

SVG 可以创建各种形状和图形，同样可以用来实现水印效果，下面是一个示例代码片段：

<body style="position: relative;">
  <svg id="watermark" style="position: absolute; top: 0; left: 0; z-index: 9999;" width="100%" height="100%">
    <text x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="3em" fill-opacity=".2">Watermark</text>
  </svg>
</body>

以上代码中，创建一个 svg 元素，并在其中添加一个 text 元素，设置 x 和 y 属性将文字置于中心位置，使用 text-anchor 属性设置对齐方式， font-size 属性设置字体大小， fill-opacity 属性设置填充颜色的透明度。

总结

以上三种方法均可以实现水印效果，其中 CSS 和 Canvas 的实现较为灵活和简单，SVG 的实现则比较优雅和可扩展。可以根据具体需求选择不同的实现方式。