CSS background-clip
속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
요소가 background-image
또는 background-color
를 가지지 않으면, background-clip
은 (border-style
또는 border-image
등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.
구문
/* 키워드 값 */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
/* 전역 값 */
background-clip: inherit;
background-clip: initial;
background-clip: unset;
값
border-box
- 배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)
padding-box
- 배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.
content-box
- 배경을 콘텐츠 상자에 맞춰 그립니다.
text
- 배경을 전경 텍스트 위에만 그립니다.
형식 정의
초기값 | border-box |
---|---|
적용대상 | all elements. It also applies to ::first-letter and ::first-line . |
상속 | no |
Computed value | as specified |
Animation type | discrete |
형식 구문
예제
HTML
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
CSS
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'background-clip' in that specification. |
Candidate Recommendation | Initial definition. |
CSS Backgrounds and Borders Module Level 4 The definition of 'background-clip' in that specification. |
Editor's Draft | Add text value. |
브라우저 호환성
BCD tables only load in the browser
같이 보기
clip-path
속성은 배경 뿐 아니라 하나의 요소 전체에서 표시할 부분을 지정하는 클리핑 영역을 생성합니다.- 배경 속성:
background
,background-color
,background-image
,background-origin
- CSS 기본 박스 모델 입문