목차
- background-clip 속성 - 배경 영역 지정
- background-clip 정의
- background-clip 구문
background-clip 속성 - 배경 영역 지정
<style>
div {
border: 10px dotted blue;
padding: 15px;
background: Tomato;
}
#hz1 {
background-clip: border-box; // 테두리 바깥쪽선까지
}
#hz2 {
background-clip: padding-box; // 테두리 안쪽선까지
}
#hz3 {
background-clip: content-box; // 컨텐츠영역까지
}
</style>
<p>background-clip: border-box (기본값)</p>
<div id="hz1">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<p>background-clip: padding-box</p>
<div id="hz2">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<p>background-clip: content-box</p>
<div id="hz3">
<p>홈짱닷컴 Homzzang.com</p>
</div>
결과보기
background-clip 정의
요소 내에서 배경색상(배경이미지)가 얼마나 멀리 확장되어야하는지 지정.
1.
- 기본값 : border-box
- 상속여부 : X
- 애니효과 : X
- CSS버전 : CSS3
- JS구문 : object.style.backgroundClip="content-box"
2.
IE9 이상 주요 최신브라우저 지원.
3. MDN background-clip 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
background-clip 구문
selector {background-clip: border-box|padding-box|content-box|initial|inherit;}
[속성값]
border-box
테두리 뒤까지 배경 확장. (기본값)
padding-box
테두리 안쪽 가장자리까지 배경 확장.
content-box
내용 상자 가장자리까지 배경 확장.
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
