[background] CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드클립속성)

1. background-clip 속성 - 배경 영역 지정
2. background-clip 정의
3. 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

부모 요소의 속성값 상속.