텍스트 안에 배경 이미지 넣기

 

CSS의 background-clip 속성을 이용하면 박스 모델 안에서 배경 이미지를 어디까지 표시할지 결정할 수 있습니다. 

 

background-clip: border-box | padding-box | content-box

 

예를 들어, 아래 소스에서 .bg1 스타일은 배경 이미지를 border-box까지 표시하죠

 

 

 

See the Pen bg-clip-1 by do.it.html5 (@kyrieko) on CodePen.

 

 

이 속성을 사용해서 텍스트 안에 배경 이미지를 넣을 수도 있습니다. 이 경우에는 background-clip 속성을 text로 지정하는데, -webkit- 접두어가 붙은 background-clip 속성도 함께 사용해야 합니다. 그리고 글자색은 trasparent로 사용합니다. 

 

background-clip: text;
-webkit-background-clip: text;
color: transparent;

 

이 속성을 사용해 위 예제와 똑같은 글자에 배경 이미지를 넣어보겠습니다.

 

 

See the Pen bg-clip-2 by do.it.html5 (@kyrieko) on CodePen.