[DOM_Style] JS - backgroundClip 속성 - 배경 영역 (= backgroundClip속성 = 백그라운드클립속성)

1. backgroundClip 예제 - 배경 영역 설정
2. backgroundClip 정의
3. backgroundClip 구문

backgroundClip 예제 - 배경 영역 설정 

 

<style> 

#hz {

  width: 200px;

  height: 50px;

  padding: 50px;

  background-color: coral;

  background-clip: border-box;

  color: white;

  border: 10px dotted black;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("hz").style.backgroundClip = "content-box";

}

</script>

 

결과보기

backgroundClip 정의

 

배경 페인팅 영역 설정/반환.

 

backgroundClip 구문

 

[접근]

object.style.backgroundClip 

 

[설정]

object.style.backgroundClip = "border-box|padding-box|content-box|initial|inherit"

 

---

[속성값]

 

CSS background-clip 속성 참고