前端实现水印效果的5种方案举例

/* 示例代码 */
<div class="watermark"></div>
.watermark::before {
  content: "我是水印";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  font-size: 48px;
  color: #ccc;
  pointer-events: none;
}

<!-- 示例代码 -->
<canvas id="watermarkCanvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById("watermarkCanvas");
  const context = canvas.getContext("2d");

  const image = new Image();
  image.src = "your-image.jpg"; // 你的图片URL

  image.onload = function() {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    context.font = "48px Arial";
    context.fillStyle = "rgba(255, 0, 0, 0.5)";
    context.fillText("Watermark Text", 50, 50);
  };
</script>

<!-- 示例代码 -->
<style>
  .watermarked-element {
    width: 100%;
    height: 100%;
    background-image: url('watermark.png'); /* 水印图片的URL */
    background-repeat: repeat; /* 重复水印图片 */
    opacity: 0.5; /* 设置水印透明度 */
    pointer-events: none; /* 防止水印干扰用户交互 */
  }
</style>

<div class="watermarked-element">
  <!-- 页面内容 -->
</div>

<!-- 示例代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <text x="10" y="40" font-family="Arial" font-size="24" fill="rgba(255, 0, 0, 0.5)">
    Watermark Text
  </text>
</svg>

<!-- 示例代码 -->
<script src="watermark.js"></script>
<script>
  const watermarkConfig = {
    watermarkText: "

Watermark Text",
    watermarkTextFont: "24px Arial",
    watermarkTextColor: "rgba(255, 0, 0, 0.5)",
  };
  
  watermark.init(watermarkConfig);
  watermark.load({
    watermark_x: 20,
    watermark_y: 20,
  });
</script>