background-clip 속성

background-clip 속성은 배경 채우기 또는 배경 이미지가 요소를 기준으로 어떻게 위치할지 정의합니다: 경계 아래, padding 내부만, 또는 콘텐츠 위에만 위치합니다.

특징

• 투명한 경계와 함께 border-box를 사용하면 배경이 그 아래에서 보입니다.
• text 값은 완전한 지원을 위해 벤더 프리픽스가 필요합니다.
• 이 속성은 그라데이션 및 다중 배경과 함께 작동합니다.
• border-radius를 사용하면 배경이 둥근 모서리에 따라 잘립니다.

브라우저 지원

모든 최신 브라우저는 border-box, padding-box 및 content-box를 지원합니다. text 값은 -webkit- 프리픽스가 필요하며 Chrome, Safari, Edge에서 지원됩니다.

문법

css선택자 {
  background-clip: border-box | padding-box | content-box | text;
}

값

기본값: border-box.

예제 . border-box 값

배경이 반투명 경계 아래로 들어갑니다:

html<div id="elem"></div>

css#elem {
  background-clip: border-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

예제 . padding-box 값

배경이 경계 아래로 들어가지 않습니다:

html<div id="elem"></div>

css#elem {
  background-clip: padding-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.5);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

예제 . content-box 값

배경이 padding 위로 들어가지 않습니다:

html<div id="elem">
  텍스트 텍스트 텍스트 텍스트 텍스트
  텍스트 텍스트 텍스트 텍스트 텍스트
  텍스트 텍스트 텍스트 텍스트 텍스트
</div>

css#elem {
  background-clip: content-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

예제 . text 값

배경이 텍스트에 따라 잘립니다(transparent 값의 -webkit-text-fill-color가 필요함):

html<div id="elem">텍스트 텍스트 텍스트</div>

css#elem {
  display: inline-block;
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  font-size: 40px;
  font-weight: bold;
}

Результат:

함께 보기