当前位置：首页 > React

react模态框如何加水印

2026-03-11 11:43:22React

在React模态框中添加水印的方法

使用CSS背景图实现水印 通过CSS的background-image属性可以为模态框添加文字或图片水印。创建一个半透明的文字水印样式并应用到模态框容器上：

.modal-container {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><text x="50" y="100" font-family="Arial" font-size="20" fill-opacity="0.2" fill="%23000" transform="rotate(-30)">CONFIDENTIAL</text></svg>');
  background-repeat: repeat;
}

使用伪元素叠加水印 通过::before或::after伪元素创建绝对定位的水印层，不影响模态框内容：

// React组件内联样式
const modalStyle = {
  position: 'relative',
  overflow: 'hidden'
};

const watermarkStyle = {
  position: 'absolute',
  opacity: 0.2,
  zIndex: 0,
  pointerEvents: 'none',
  transform: 'rotate(-15deg)'
};

function Modal() {
  return (
    <div style={modalStyle}>
      <div style={watermarkStyle}>SAMPLE WATERMARK</div>
      {/* 模态框实际内容 */}
    </div>
  );
}

使用第三方水印库 安装专业水印库如react-watermark：

npm install react-watermark

在模态框组件中使用：

import Watermark from 'react-watermark';

function ProtectedModal() {
  return (
    <Watermark text="SECRET" opacity={0.15}>
      <Modal>
        {/* 模态内容 */}
      </Modal>
    </Watermark>
  );
}

动态水印方案 结合Canvas生成动态水印，防止简单删除：

function generateWatermark(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');
  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  ctx.rotate(-0.3);
  ctx.fillText(text, 10, 50);
  return canvas.toDataURL();
}

// 在组件中使用
<div style={{
  backgroundImage: `url(${generateWatermark('DRAFT')})`
}}>

注意事项

react模态框如何加水印