background-clip

background-clip (배경 클리핑)

요소의 배경이 어느 경계(bounding box)까지 채워질지를 정하는 유틸리티예요. 텍스트 모양에 맞춰 배경을 잘라내는 기법(bg-clip-text)이 특히 인기예요.

출처: 문서

본문

ClassStyles

클래스	스타일
`bg-clip-border`	`background-clip: border-box;`
`bg-clip-padding`	`background-clip: padding-box;`
`bg-clip-content`	`background-clip: content-box;`
`bg-clip-text`	`background-clip: text;`

Examples

Basic example

bg-clip-border, bg-clip-padding, bg-clip-content 유틸리티를 사용하면 요소의 배경이 채워지는 경계를 조절할 수 있어요.

<div class="border-4 bg-indigo-500 bg-clip-border p-3"></div>
<div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div>
<div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>

Cropping to text

bg-clip-text 유틸리티를 사용하면 요소의 배경을 텍스트 모양에 맞춰 잘라낼 수 있어요.

<p class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ...">
  Hello world
</p>

Responsive design

background-clip 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="bg-clip-border md:bg-clip-padding ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.