คุณสมบัติ backgroundClip ช่วยให้เราควบคุมว่าจะทาสีภาพพื้นหลังได้ไกลแค่ไหน เช่น พื้นที่ภาพวาดของภาพพื้นหลัง ใช้สำหรับตั้งหรือคืนพื้นที่ทาสีนั้น
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ backgroundClip -
background-clip: border-box | padding-box | content-box
คุณค่า
ต่อไปนี้เป็นค่า -
| Sr.No | ค่า &คำอธิบาย |
|---|---|
| 1 | เส้นขอบกล่อง คลิปนี้พื้นหลังภายใน border-box และนี่คือค่าเริ่มต้น |
| 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 -
