图片背景

使用Background将图像作为背景。

示例效果

代码：

<Background>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片背景色

背景颜色：preset1

背景颜色：preset2

背景颜色：preset3

背景颜色：preset4

背景颜色：preset5

背景颜色：preset6

背景颜色：preset7

背景颜色：preset8

背景颜色：preset9

背景颜色：preset10

背景颜色：preset11

背景颜色：preset12

背景颜色：preset13

背景颜色：preset14

背景颜色：preset15

背景颜色：preset16

背景颜色：preset17

背景颜色：preset18

背景颜色：preset19

背景颜色：preset20

代码：

背景颜色：preset1
<Background bgColor="preset1">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset2
<Background bgColor="preset2">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset3
<Background bgColor="preset3">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset4
<Background bgColor="preset4">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset5
<Background bgColor="preset5">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset6
<Background bgColor="preset6">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset7
<Background bgColor="preset7">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset8
<Background bgColor="preset8">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset9
<Background bgColor="preset9">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset10
<Background bgColor="preset10">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset11
<Background bgColor="preset11">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset12
<Background bgColor="preset12">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset13
<Background bgColor="preset13">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset14
<Background bgColor="preset14">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset15
<Background bgColor="preset15">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset16
<Background bgColor="preset16">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset17
<Background bgColor="preset17">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset18
<Background bgColor="preset18">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset19
<Background bgColor="preset19">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景颜色：preset20
<Background bgColor="preset20">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片位置

代码：

<Background position="bottom">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450191/image-preview)
</Background>

设置内容圆角

代码：

<Background radius={14}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片边框

代码：

<Background borderWidth={1}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450191/image-preview)
</Background>

设置图片上下/左右边距

代码：

<Background paddingX={80} paddingX={80}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片上/下/左/右边距

代码：

<Background paddingTop={40} paddingBottom={40} paddingLeft={20} paddingRight={20}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片背景渐变方向

代码：

<Background bgDirection={90}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片背景花纹

背景花纹：ploka

背景花纹：ploka2

背景花纹：paper

背景花纹：paper2

背景花纹：paper3

背景花纹：wave

背景花纹：electronics

背景花纹：stars

背景花纹：none

代码：

背景花纹：ploka
<Background bgGridOverlay="ploka">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：ploka2
<Background bgGridOverlay="ploka2">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：paper
<Background bgGridOverlay="paper">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：paper2
<Background bgGridOverlay="paper2">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：paper3
<Background bgGridOverlay="paper3">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：wave
<Background bgGridOverlay="wave">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：electronics
<Background bgGridOverlay="electronics">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：stars
<Background bgGridOverlay="stars">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹：none
<Background bgGridOverlay="none">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片背景花纹颜色

背景花纹颜色：white

背景花纹颜色：gray

背景花纹颜色：black

代码：

背景花纹颜色：white
<Background bgGridOverlay="ploka" bgGridOverlayColor="white">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹颜色：gray
<Background bgGridOverlay="ploka" bgGridOverlayColor="gray">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>
背景花纹颜色：black
<Background bgGridOverlay="ploka" bgGridOverlayColor="black">
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

设置图片背景圆角

代码：

<Background bgRadius={20}>
  ![image](https://api.apifox.com/api/v1/projects/4444182/resources/450190/image-preview)
</Background>

参数说明

ImageBackground

position

enum<string>

图片位置

可选

枚举值:

centertopbottomleftrighttopLefttopRightbottomLeftbottomRight

默认值:

center

radius

number

内容圆角（px）

可选

borderWidth

number

图片边框（px）

可选

shadow

enum<string>

阴影

可选

枚举值:

xsmallsmallmiddlelargexlargenone

默认值:

middle

paddingX

number

左右边距（px）

可选

paddingY

number

可选

上下边距（px），默认值为paddingX * 5/7

paddingTop

number

上边距（px）

可选

paddingBottom

number

下边距（px）

可选

paddingLeft

number

左边距（px）

可选

paddingRight

number

右边距（px）

可选

bgColor

string

可选

内置："preset1"、"preset2"、"preset3"、"preset4"... 纯色："blue"、"#1DA1F2" 渐变："#1DA1F2, #5BB1F4"、"blue,green"、"blue,red:30%,green" 颜色名直接对应 tailwindcss 的颜色名

bgDirection

number

背景渐变方向（度）

可选

bgGridOverlay

string

背景花纹

可选

bgGridOverlayColor

string

背景花纹颜色

可选

bgRadius

number

背景圆角（px）

可选

示例效果#

设置图片背景色#

设置图片位置#

设置内容圆角#

设置图片边框#

设置图片上下/左右边距#

设置图片上/下/左/右边距#

设置图片背景渐变方向#

设置图片背景花纹#

设置图片背景花纹颜色#

设置图片背景圆角#

参数说明#

示例效果

设置图片背景色

设置图片位置

设置内容圆角

设置图片边框

设置图片上下/左右边距

设置图片上/下/左/右边距

设置图片背景渐变方向

设置图片背景花纹

设置图片背景花纹颜色

设置图片背景圆角

参数说明