react项目中，用Ant design 中的Watermark设置全屏水印

本文链接：https://blog.youkuaiyun.com/m0_66288747/article/details/132762023

本文介绍了AntDesign组件中如何通过Watermark实现轻量级的数字产品设计，强调在快速迭代的数字世界中，追求自然交互以平衡复杂性与人类注意力的有限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：水印 Watermark - Ant Design

直接上代码：

import React, { Component } from 'react'
import { Watermark } from 'antd';

export default class index extends Component {
    render() {
        return (
            <div>
                <Watermark
                    zIndex={11}
                    height={30}
                    width={130}
                    content="Ant Design"
                    image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
                >
                    <div style={{ height: 500 }}>
                        <span>
                            The light-speed iteration of the digital world makes products more
                            complex. However, human consciousness and attention resources are limited.
                            Facing this design contradiction, the pursuit of
                            natural interaction will be the consistent direction of Ant Design.
                            The light-speed iteration of the digital world makes products more
                            complex. However, human consciousness and attention resources are limited.
                            Facing this design contradiction, the pursuit of
                            natural interaction will be the consistent direction of Ant Design.
                            The light-speed iteration of the digital world makes products more
                            complex. However, human consciousness and attention resources are limited.
                            Facing this design contradiction, the pursuit of
                            natural interaction will be the consistent direction of Ant Design.
                            The light-speed iteration of the digital world makes products more
                            complex. However, human consciousness and attention resources are limited.
                            Facing this design contradiction, the pursuit of
                            natural interaction will be the consistent direction of Ant Design.
                        </span>
                    </div>
                </Watermark>
            </div>
        )
    }
}

页面展示：