logo

X6

  • 文档
  • API
  • 图表示例
  • 常见问题
  • 更新日志
  • XFlow
  • 所有产品antv logo arrow
  • 2.x
  • 开始
    • 简介
    • 快速上手
  • 组件
    • XFlowGraph 画布
    • Background 背景
    • Grid 网格
    • Clipboard 复制粘贴
    • History 撤销重做
    • Minimap 小地图
    • Snapline 对齐线
    • Transform 图形变换
    • Control 控制器
  • Hook
    • useGraphInstance
    • useGraphStore
    • useGraphEvent
    • useDnd
    • useClipboard
    • useExport
    • useHistory
    • useKeyboard
  • Store

Background 背景

上一篇
XFlowGraph 画布
下一篇
Grid 网格

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

画布的背景

基础用法

注意

<Background /> 组件只能在 <XFlow /> 组件之内方可正常使用

引入 <Background /> 组件后, 即可设置 <XFlowGraph /> 的画布背景。

<XFlow>
...
<Background color="#F2F7FA" />
</XFlow>

背景颜色

通过 color 属性指定画布的背景颜色

背景图片

添加 image 属性, 指定一张背景图设置为画布的背景图片

背景水印

将 repeat 属性 设置为 watermark, 则将背景图片设置为水印效果,可以使用 angle 属性控制水印旋转角度

API

Background

参数名描述类型默认值
image背景图片URLstring-
color背景颜色 支持所有 CSS background-color 属性string-
size背景图片大小 支持所有 CSS background-size 属性string-
position背景图片位置 支持所有 CSS background-position 属性stringcenter
repeat背景图片重复方式 支持所有 CSS background-repeat 属性 以及内置属性 watermark flip-x flip-y flip-xystringno-repeat
angle水印旋转角度 仅当 repeat 属性为 watermark 时有效number20
opacity背景图片透明度number1
quality背景图片质量number1