background-clip
배경이 칠해지는 영역을 제한합니다. bgct(text)는 배경을 텍스트 형태로 잘라내어 그라디언트 텍스트 효과를 만드는 매우 인기 있는 디자인 기법입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgcbb | background-clip: border-box | border 영역까지 배경 칠함 (기본값) |
bgcpb | background-clip: padding-box | padding 영역까지만 배경 칠함 |
bgccb | background-clip: content-box | content 영역에만 배경 칠함 |
bgct | background-clip: text | 텍스트 형태로 배경을 잘라냄 (그라디언트 텍스트) |
사용 예시
bgct를 사용하면 텍스트에 그라디언트나 이미지를 입힐 수 있습니다. color를 transparent로 설정해야 배경이 보입니다.
<!-- 그라디언트 텍스트 효과 -->
<h1 class="bgct fs4-8rem fw900">
Gradient Text
</h1>
<!-- padding 영역까지만 배경 -->
<div class="bgcpb bg6366F1 p2rem b8pxdashed27272A">
border 영역에는 배경이 없습니다
</div>
<!-- content 영역에만 배경 -->
<div class="bgccb bg34D399 p2rem b8pxdashed27272A">
content 영역에만 배경이 칠해집니다
</div>팁
그라디언트 텍스트 패턴
bgct와 함께 background-image(그라디언트)를 설정하고, 텍스트 색상을 transparent로 지정하면 됩니다.
브라우저 호환성
bgct는 -webkit-background-clip: text가 필요할 수 있습니다. 최신 브라우저에서는 대부분 지원됩니다.