backgroundClip 속성을 사용하면 배경 이미지가 칠해지는 범위, 즉 배경 이미지의 페인팅 영역을 제어할 수 있습니다. 해당 페인팅 영역을 설정하거나 반환하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.backgroundClip 속성 설정 -
background-clip: border-box | padding-box | content-box
값
다음은 값입니다 -
| Sr.No | 값 및 설명 |
|---|---|
| 1 | 테두리 상자 이것은 테두리 상자 내의 배경을 자르고 이것이 기본값입니다. |
| 2 | 패딩 상자 패딩 상자 내에서 배경을 자릅니다. |
| 3 | 콘텐츠 상자 콘텐츠 상자 내에서 배경이 잘립니다. |
예시
backgroundclip 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#one {
box-shadow: 0 0 2px black;
padding: 18px;
background: skyblue;
background-clip: content-box;
}
</style>
<script>
function changeBackClip(){
document.getElementById("one").style.backgroundClip="padding-box";
document.getElementById("Sample").innerHTML="The background clip property is now padding-box";
background-clip: border-box | padding-box | content-box
}
</script>
</head>
<body>
<div id="one">
Phasellus eu justo lectus. Praesent et nulla facilisis, venenatis justo eget, tempor lectus.
Integer ut felis vel lectus convallis fermentum. Fusce ut felis mauris.</div>
<p>Change the above div background-clip value by clicking the below button</p>
<button onclick="changeBackClip()">CHANGE CLIP</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE CLIP 버튼을 클릭하면 -
