background-clip

background-clip은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지를 지정함.

 

border-box 배경이 테두리의 바깥 경계까지 차지(Z축 순서 상 테두리 아래 위치함)

padding-box 배경이 안쪽 여백의 바깥 경계까지 차지함(테두리 밑에는 배경을 그리지 않음)

content-box 배경을 콘텐츠 상자에 맞춰 그림

text 배경을 전경 텍스트 위에만 그림

 

 

예시)

background: linear-gradient(to right, #8b5ad4, #c760d8, #92ccf5);
background-clip : text;
-webkit-background-clip: text;
color: transparent;

* 해당 효과를 적용할 텍스트 요소가 inline-block이어야 원하는 효과를 확인할 수 있음.

* 요소가 background-image 또는 background-color를 가지지 않을 경우, (border-style 또는 border-image 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생함. 그렇지 않은 경우 테두리가 차이점을 가림.

 

 

참고문서 - MDN https://developer.mozilla.org/ko/docs/Web/CSS/background-clip