배경

배경 (Background)

배경색, 그라디언트, 이미지를 스타일링하는 JSX 스타일 prop을 알려드려요. 배경 관련 prop을 원하는 대로 조합할 수 있어요.

출처: 문서

본문

Background Attachment

bgAttachment를 사용해서 배경 이미지의 첨부(attachment)를 제어하세요.

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

Background Blend Mode

bgBlendMode prop을 사용해서 요소의 배경 이미지가 배경색과 어떻게 블렌딩될지를 제어하세요.

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

Background Clip

bgClip을 사용해서 배경 이미지의 클리핑(clipping)을 제어하세요.

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

Background Color

bg, bgColor, backgroundColor prop을 사용해서 요소의 배경색을 설정하세요.

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

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

Background Origin

bgOrigin 또는 backgroundOrigin을 사용해서 배경 이미지의 오리진(origin)을 제어하세요.

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

Background Position

배경 이미지의 위치를 제어하는 속성들이에요.

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

Background Repeat

bgRepeat 또는 backgroundRepeat을 사용해서 배경 이미지의 반복을 제어하세요.

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

Background Size

bgSize 또는 backgroundSize를 사용해서 배경 이미지의 크기를 제어하세요.

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

Background Image

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})" />

Background Gradient

색상 중지점(color stop)에 기반한 배경 그라디언트를 만드는 속성들이에요.

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

더 알아보기 (Learn more)

• Style Props - Effects
• 색상 투명도 수정자