배경
background-clip
엘리먼트의 배경 경계 상자를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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; |
예제
기본 예제
bg-clip-border, bg-clip-padding, bg-clip-content 유틸리티를 사용하여 엘리먼트의 배경 경계 상자를 제어할 수 있습니다:
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>텍스트에 맞춰 자르기
bg-clip-text 유틸리티를 사용하면 요소의 배경을 텍스트의 모양에 맞게 잘라낼 수 있습니다.
Hello world
<p class="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ..."> Hello world</p>반응형 디자인
접두사 a background-clip 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="bg-clip-border md:bg-clip-padding ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
