Preview Updated 2026-05-10

Watermark

Overlay tilted, repeating text watermarks on a content container. Useful for tracing leak sources on sensitive pages.

Basic usage

content can be a single string or an array of strings (multi-line watermark). The watermark is layered via an SVG data URL on ::after with pointer-events: none, so content interaction isn’t blocked.

背景

敏感内容

水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。

src/App.vue

<script setup lang="ts">
import { CfWatermark } from '@chufix-design/vue';
</script>
<template>
  <CfWatermark content="ChuFix UI · Confidential">
    <div style="padding: 32px; min-height: 200px; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px;">
      <h3 style="margin: 0 0 8px;">敏感内容</h3>
      <p style="margin: 0; color: var(--fg-2);">水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。</p>
    </div>
  </CfWatermark>
</template>

<script setup>
import { CfWatermark } from '@chufix-design/vue';
</script>
<template>
  <CfWatermark content="ChuFix UI · Confidential">
    <div style="padding: 32px; min-height: 200px; background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px;">
      <h3 style="margin: 0 0 8px;">敏感内容</h3>
      <p style="margin: 0; color: var(--fg-2);">水印覆盖整个容器，倾斜重复渲染。截图后水印仍可见，便于追溯泄漏来源。</p>
    </div>
  </CfWatermark>
</template>

import { CfWatermark } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfWatermark content="ChuFix UI · Confidential">
      <div className="protected-area">
        <h3>Sensitive content</h3>
        <p>The watermark covers the whole container, tiled and tilted.</p>
      </div>
      </CfWatermark>
    </>
  );
}

API

Prop	Type	Default	Description
`content`	`string \| string[]`	`—`	Watermark text; arrays render as multiple lines
`fontSize`	`number`	`14`	Font size (px)
`color`	`string`	`oklch(... / 0.16)`	Text color, including alpha
`rotate`	`number`	`-22`	Rotation angle (deg)
`gap`	`[number, number]`	`[160, 80]`	Horizontal / vertical spacing between tiles
`zIndex`	`number`	`9`	Overlay z-index