Ant Design Blazor
Watermark水印
给页面的某个区域加上水印。
何时使用
- 页面需要添加水印标识版权时使用。
- 适用于防止信息盗用。
Examples
最简单的用法。
通过 content 设置 字符串数组 指定多行文字水印内容。
通过 image 指定图片地址。为保证图片高清且不被拉伸，请设置 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。
实现无限滚动文字效果。
实现无限滚动图片效果。
通过自定义参数配置预览水印效果。
Watermark API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Width | 属性水印的宽度，content 的默认值是它自己的宽度 |
Int32 | 120 |
| Height | 属性水印的高度，content 的默认值是它自己的高度 |
Int32 | 64 |
| Rotate | 属性绘制水印时，旋转角度，单位 ° |
Int32 | -22 |
| Alpha | 属性透明度，值范围 [0-1] | Single | 1f |
| FontSize | 属性字体大小 | Int32 | 16 |
| FontColor | 属性字体颜色 | String | rgba(0,0,0,.15) |
| FontFamily | 属性字体系列 | String | sans-serif |
| FontWeight | 属性字体粗细。该值可以是 normal、light、weight 和 number。 |
String | normal |
| FontStyle | 属性字形。该值可以是 none、normal、italic 和 oblique。 |
String | normal |
| Content | 属性水印文本内容 | String | -- |
| Contents | 属性多行水印文本内容 | String[] | -- |
| ZIndex | 属性附加的 watermark 元素的 z-index。 | Int32 | 9 |
| Gap | 属性水印之间的间距。 X：水印之间的 x 轴间距 Y：水印之间的 y 轴间距 |
ValueTuple<Int32, Int32> | (100, 100) |
| Image | 属性图片来源，建议导出 2x 或 3x 图像，高优先级（支持 base64 格式） | String | -- |
| Offset | 属性水印与容器左上角的偏移量。默认值为 gap/2。 |
ValueTuple<Int32, Int32> | (gap[0]/2, gap[1]/2) |
| LineSpace | 属性行距仅在有多行时适用（内容配置为数组） | Int32 | 16 |
| Scrolling | 属性启用无限滚动文本效果 | Boolean | -- |
| ScrollingSpeed | 属性运动位移的间隔，以毫秒为单位。 | Int32 | 3000 |
| Repeat | 属性设置或获取是否重复水印 | Boolean | true |
| Grayscale | 属性图片是否需要灰度显示（颜色到灰度） | Boolean | false |
| ChildContent | 属性子内容 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| Load(String url) | void |