网页常见水印实现方式

最新推荐文章于 2025-05-14 14:41:23 发布

村头的猫

最新推荐文章于 2025-05-14 14:41:23 发布

阅读量936

点赞数 39

文章标签： javascript 前端算法

本文链接：https://blog.csdn.net/m0_47221837/article/details/147929973

版权

文章目录

近期文章：

在数字化时代，网页水印已成为版权保护、信息溯源的核心技术。今天就从明暗水印原理、前后端实现方案、防篡改机制等维度展开解析，结合主流技术实现代码，探讨水印技术的攻防博弈与最佳实践。

1 明水印技术实现

1.1 DOM覆盖方案

sTK37U7G_WX20250513-172616@2x.png

通过创建绝对定位的DOM元素覆盖目标区域，利用CSS层级(z-index)和透明度(opacity)控制视觉呈现。此方案支持动态文本注入和样式定制，但存在性能消耗和易篡改的缺陷。

示例代码

<!doctype html>
<html>
  <head>
    <title>水印测试</title>
    <style>
      body{
   height: 100%;}
    </style>
  </head>
  <body>
    <script>
      function createDOMWatermark(opt) {
   
        const watermark = document.createElement('div');
        watermark.style.position = 'fixed';
        watermark.style.top = '0';
        watermark.style.left = '0';
        watermark.style.width = '100%';
        watermark.style.height = '100%';
        watermark.style.zIndex = '9999999';
        watermark.style.userSelect = 'none';
        watermark.style.pointerEvents = 'none';
        watermark.style.background = `repeating-linear-gradient(
          -${
     opt.rotate || 45}deg, 
          rgba(0,0,0,0.1), 
          rgba(0,0,0,0.1) 20px, 
          transparent 20px, 
          transparent 40px
        )`;
        watermark.innerHTML = `<div style="
          
          transform: rotate(-30deg) translate(-50%, -50%);
          color: ${
     opt.color || '#333'};
          font-size: ${
     opt.fontSize || '24px'};
          position: absolute;
          opacity: