background-clip 속성

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

특징

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

브라우저 지원

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

문법

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

값

값	설명
`border-box`	배경이 경계의 외부 가장자리(경계 아래)까지 확장됩니다.
`padding-box`	배경이 경계의 내부 가장자리에서 잘립니다(`border` 아래로 들어가지 않음).
`content-box`	배경이 콘텐츠 위에서만 표시됩니다(`padding`에서 잘림).
`text`	배경이 텍스트에 따라 잘립니다.

기본값: border-box.

예제 . border-box 값

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

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

#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 값

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

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

#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 위로 들어가지 않습니다:

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

#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가 필요함):

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

#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;
}

함께 보기

background 속성,
배경을 위한 단축 속성입니다.
background-origin 속성,
배경의 원점 위치를 정의합니다.