Watermark 水印

覆盖重复的文本或图像水印以保护内容,同时保持其交互性。

导入

import { Watermark } from 'asterui'

示例

文本水印

对卡片应用重复的文本水印。

</>

Product Brief

Provide enough spacing and padding on parent containers so the watermark tiles stay visible. The overlay is pointer-events-none, so links and inputs remain usable.

import { Watermark, Card, Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Watermark
        content="Confidential"
        gap={[140, 120]}
        font={{ fontWeight: 700, color: 'hsl(var(--bc) / 0.28)' }}
      >
        <Card title="Product Brief" className="bg-base-200 min-h-[420px] flex items-center">
          <Paragraph className="text-base-content/80">
            Provide enough spacing and padding on parent containers so the watermark tiles stay visible. The overlay is pointer-events-none, so links and inputs remain usable.
          </Paragraph>
        </Card>
      </Watermark>
    )
}

export default App

多行

堆叠多行,带有自定义字体、间隙和旋转。

</>

Release Checklist

• Validate components in docs and examples
• Update changelog and version
• Record accessibility notes

import { Watermark, Typography } from 'asterui'

function App() {
  const { Title } = Typography
  
  return (
      <Watermark
        content={["AsterUI", "Internal"]}
        gap={[120, 100]}
        rotate={-30}
        offset={[48, 48]}
        font={{ fontSize: 18, fontWeight: 700, color: 'hsl(var(--bc) / 0.26)' }}
      >
        <div className="bg-base-200 border border-base-300 rounded-box p-6 min-h-[400px] flex flex-col gap-2">
          <Title level={4} className="m-0">Release Checklist</Title>
          <ul className="list-disc list-inside text-sm text-base-content/80 space-y-1">
            <li>Validate components in docs and examples</li>
            <li>Update changelog and version</li>
            <li>Record accessibility notes</li>
          </ul>
        </div>
      </Watermark>
    )
}

export default App

图像水印

使用数据 URI 或托管图像为内容添加水印。

</>

Image Watermark

Supply a data URI or hosted image. Images are drawn to canvas with rotation and gap applied.

import { Watermark, Typography } from 'asterui'

function App() {
  const { Title, Text } = Typography
  
  const logoSvg = 'data:image/svg+xml;utf8,' +
    encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.18" />
        <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0.18" />
      </linearGradient>
    </defs>
    <circle cx="100" cy="100" r="88" fill="url(#g)" />
    <text x="100" y="115" text-anchor="middle" font-size="48" font-family="sans-serif" fill="#0f172a" fill-opacity="0.35" font-weight="700">AU</text>
  </svg>`)
  
  return (
      <Watermark image={logoSvg} width={160} height={160} gap={[120, 120]} rotate={-25}>
        <div className="bg-base-200 border border-base-300 rounded-box p-6 min-h-[420px]">
          <Title level={4} className="m-0">Image Watermark</Title>
          <Text className="text-sm text-base-content/80 block">
            Supply a data URI or hosted image. Images are drawn to canvas with rotation and gap applied.
          </Text>
        </div>
      </Watermark>
    )
}

export default App

API

Watermark

属性	描述	类型	默认值
content	水印文本(字符串或行)	string | string[]	-
image	要渲染的图像 URL 或数据 URI,代替文本	string	-
gap	瓦片之间的水平和垂直间隙	[number, number]	[120, 120]
offset	第一个瓦片的起始偏移	[number, number]	gap / 2
width	瓦片宽度(像素)	number	120
height	瓦片高度(像素)	number	64
rotate	旋转角度(度)	number	-22
zIndex	覆盖层的 z-index	number	1000
font	文本水印的字体设置	WatermarkFontOptions	-
className	额外的 CSS 类	string	-
style	包装器的自定义样式	React.CSSProperties	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 水印覆盖层使用 pointer-events: none 以确保内容保持交互性
• 水印纯粹是装饰性的,不会干扰辅助技术
• 水印下方的所有交互元素对键盘和屏幕阅读器用户保持完全可访问
• 半透明渲染确保底层内容保持可见和可读