background-clip:text
background-clip은 요소의 배경을 어디까지 확장시킬지를 결정하는 CSS속성입니다. 이중 background-clip:text는 배경의 범위를 텍스트 모양까지로 제한하는 역할을 합니다. 이를 활용하면, 텍스트 내부에만 배경이 채워지는 텍스트 마스크 효과를 구현할 수 있습니다. 일부 브라우저에서 표준 속성을 지원하지 않기 때문에 크로스브라우징을 위하여 접두사 -webkit-를 붙여 사용합니다.
background-clip을 활용한 텍스트 마스크
See the Pen textmask01 by soojeong (@sooj0601) on CodePen.
background-clip:text를 활용하여 배경이미지가 텍스트 내부에 채워지도록 설정했습니다. 이때 color:transparent를 사용해 마스크로 사용할 글자색을 투명하게 해야 합니다.
텍스트 내부에 그라데이션 효과 적용
같은 방법으로 배경에 그라데이션 효과를 주면, 멋진 그라데이션 텍스트 마스크가 만들어집니다.
'👩💻 > CSS, SCSS' 카테고리의 다른 글
| SCSS 활용 팁 17. 시스템 설정에 기반하여 다크모드 적용하기 (1) | 2025.02.06 |
|---|---|
| SCSS 활용 팁 16. SCSS를 활용한 다크모드 만들기 (0) | 2025.02.06 |
| SCSS 활용 팁 15. SCSS 컬러 내장함수 사용하여 컬러쉐이드 만들기 (0) | 2025.02.05 |
| SCSS 활용 팁 14. SCSS 컬러 내장함수 사용하여 색상 관리하기 (0) | 2025.02.04 |
| [CSS] 이미지 편집 없이 CSS만으로 마스크 기능 만들기 (mask-image) (0) | 2025.02.03 |
