background-clip
배경이 칠해지는 영역을 제한합니다. bgct(text)는 배경을 텍스트 형태로 잘라내어 그라디언트 텍스트 효과를 만드는 매우 인기 있는 디자인 기법입니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 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로 설정해야 배경이 보입니다.
<!-- Gradient text effect -->
<h1 class="bgct fs4-8rem fw900">
Gradient Text
</h1>
<!-- Background only up to padding area -->
<div class="bgcpb bg6366F1 p2rem b8pxdashed27272A">
No background in the border area
</div>
<!-- Background only in content area -->
<div class="bgccb bg34D399 p2rem b8pxdashed27272A">
Background only fills the content area
</div>팁
그라디언트 텍스트 패턴
bgct와 함께 background-image(그라디언트)를 설정하고, 텍스트 색상을 transparent로 지정하면 됩니다.
브라우저 호환성
bgct는 -webkit-background-clip: text가 필요할 수 있습니다. 최신 브라우저에서는 대부분 지원됩니다.