Ant Design Blazor
Watermark
Add specific text or patterns to the page.
When To Use
- Use when the page needs to be watermarked to identify the copyright.
- Suitable for preventing information theft.
Examples
The most basic usage.
Use 'content' to set a string array to specify multi-line text watermark content.
Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
The infinite scrolling text effect.
The infinite scrolling image effect.
Preview the watermark effect by configuring custom parameters.
Watermark API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Width | ParameterThe width of the watermark, the default value of content is its own width |
Int32 | 120 |
| Height | ParameterThe height of the watermark, the default value of content is its own height |
Int32 | 64 |
| Rotate | ParameterWhen the watermark is drawn, the rotation Angle, unit ° |
Int32 | -22 |
| Alpha | Parametertransparency, value range [0-1] | Single | 1f |
| FontSize | Parameterfont size | Int32 | 16 |
| FontColor | Parameterfont color | String | rgba(0,0,0,.15) |
| FontFamily | Parameterfont family | String | sans-serif |
| FontWeight | Parameterfont weight. The value can be normal, light, weight and number. |
String | normal |
| FontStyle | Parameterfont style. The value can be none, normal, italic and oblique. |
String | normal |
| Content | ParameterWatermark text content | String | -- |
| Contents | ParameterMultiple-line watermark text contents | String[] | -- |
| ZIndex | ParameterThe z-index of the appended watermark element. | Int32 | 9 |
| Gap | ParameterThe spacing between watermarks. X: the x-axis spacing between watermarks Y: the y-axis spacing between watermarks |
ValueTuple<Int32, Int32> | (100, 100) |
| Image | ParameterImage source, it is recommended to export 2x or 3x image, high priority (support base64 format) | String | -- |
| Offset | ParameterThe offset of the watermark from the upper left corner of the container. The default is gap/2. |
ValueTuple<Int32, Int32> | (gap[0]/2, gap[1]/2) |
| LineSpace | ParameterThe line spacing, only applies when there are multiple lines (content is configured as an array) | Int32 | 16 |
| Scrolling | ParameterEnable infinite scrolling text effect | Boolean | -- |
| ScrollingSpeed | ParameterThe interval of motion displacement, in milliseconds. | Int32 | 3000 |
| Repeat | Parameterset or get whether to repeat the watermark | Boolean | true |
| Grayscale | ParameterWhether the picture needs gray scale display (color to gray) | Boolean | false |
| ChildContent | ParameterThe child Content | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Load(String url) | void |