背景

背景附件

¥Background Attachment

使用 bgAttachment 控制背景图片的附加方式。

¥Use bgAttachment to control the attachment of a background image.

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

属性	CSS 属性	标记类别
bgAttachment, backgroundAttachment	background-attachment	*

背景混合模式

¥Background Blend Mode

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

¥Use bgBlendMode prop to control how an element's background image should blend with the its background color.

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

背景剪辑

¥Background Clip

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

¥Use bgClip to control the clipping of a background image.

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

属性	CSS 属性	标记类别
bgClip, backgroundClip	background-clip	*

背景颜色

¥Background Color

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

¥Use bg, bgColor, or backgroundColor props to set the background color of an element.

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

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

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

背景原点

¥Background Origin

使用 bgOrigin 或 backgroundOrigin 控制背景图片的来源。

¥Use bgOrigin or backgroundOrigin to control the origin of a background image.

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

属性	CSS 属性	标记类别
bgOrigin, backgroundOrigin	background-origin	*

背景位置

¥Background Position

用于控制背景图片的 src 和位置的属性。

¥Properties for controlling the src and position of a background image.

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

属性	CSS 属性	标记类别
bgPosition, backgroundPosition	background-image	*
bgPositionX, backgroundPositionX	background-image	*
bgPositionY, backgroundPositionY	background-image	*

背景重复

¥Background Repeat

使用 bgRepeat 或 backgroundRepeat 控制背景图片的重复。

¥Use bgRepeat or backgroundRepeat to control the repeat of a background image.

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

属性	CSS 属性	标记类别
bgRepeat, backgroundRepeat	background-repeat	*

背景大小

¥Background Size

使用 bgSize 或 backgroundSize 控制背景图片的大小。

¥Use bgSize or backgroundSize to control the size of a background image.

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

属性	CSS 属性	标记类别
bgSize, backgroundSize	background-size	*

背景图片

¥Background Image

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

¥Use bgImage or backgroundImage to set the background image of an element.

<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 属性	标记类别
bgImage, backgroundImage	background-image	assets, gradients

背景渐变

¥Background Gradient

用于基于色标创建背景渐变的属性。

¥Properties to create a background gradient based on color stops.

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

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