背景

背景附着

使用bgAttachment 来控制背景图像的附着方式。

<Box bgAttachment="fixed" bgImage="url(...)" />

属性	CSS 属性	Token 类别
bgAttachment, backgroundAttachment	background-attachment	-

背景混合模式

使用 bgBlendMode 属性来控制元素的背景图像如何与背景颜色混合。

<Box bgBlendMode="multiply" bgColor="red.200" bgImage="url(...)" />

背景裁剪

使用 bgClip 来控制背景图像的裁剪。

<Box bgClip="border-box" bgImage="url(...)" />

属性	CSS 属性	Token 类别
bgClip, backgroundClip	background-clip	-

背景颜色

使用 bg、bgColor 或 backgroundColor 属性来设置元素的背景颜色。

<Box bg="red.200" />
<Box bgColor="red.200" />

// with opacity modifier
<Box bg="blue.200/30" />
<Box bgColor="blue.200/30" />

属性	CSS 属性	Token 类别
bg, background	background	colors
bgColor, backgroundColor	background-color	colors

背景原点

使用 bgOrigin 或 backgroundOrigin 来控制背景图像的原点。

<Box bgOrigin="border-box" bgImage="url(...)" />

属性	CSS 属性	Token 类别
bgOrigin, backgroundOrigin	background-origin	-

背景位置

用于控制背景图像源和位置的属性。

<Box bgImage="url(...)" bgPosition="center" />

属性	CSS 属性	Token 类别
bgPosition, backgroundPosition	background-image	-
bgPositionX, backgroundPositionX	background-image	-
bgPositionY, backgroundPositionY	background-image	-

背景重复

使用 bgRepeat 或 backgroundRepeat 来控制背景图像的重复方式。

<Box bgRepeat="no-repeat" bgImage="url(...)" />

属性	CSS 属性	Token 类别
bgRepeat, backgroundRepeat	background-repeat	-

背景尺寸

使用 bgSize 或 backgroundSize 来控制背景图像的尺寸。

<Box bgSize="cover" bgImage="url(...)" />

属性	CSS 属性	Token 类别
bgSize, backgroundSize	background-size	-

背景图像

使用 bgImage 或 backgroundImage 来设置元素的背景图像。

<Box bgImage="url(...)" />
<Box bgImage="radial-gradient(circle, #0000 45%, #000f 48%)" />
<Box bgImage="linear-gradient(black, white)" />

// with token reference
<Box bgImage="linear-gradient({colors.red.200}, {colors.blue.200})" />

属性	CSS 属性	Token 类别
bgImage, backgroundImage	background-image	assets, gradients

背景渐变

根据颜色停止点创建背景渐变的属性。

<Box bgGradient="to-r" gradientFrom="red.200" gradientTo="blue.200" />

属性	CSS 属性	Token 类别
bgGradient	background-image	gradients
textGradient	background-image	gradients
gradientFrom	--gradient-from	colors
gradientTo	--gradient-to	colors
gradientVia	--gradient-via	colors