คุณสมบัติ backgroundClip ให้เราควบคุมได้ว่าภาพพื้นหลังจะถูกวาด (painted) ไปจนถึงที่ไหน คือพื้นที่การวาดของภาพพื้นหลัง ใช้สำหรับตั้งค่าหรือคืนค่าพื้นที่การวาดนั้นๆ
ไวยากรณ์ (Syntax)
background-clip: border-box | padding-box | content-box
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | border-box ตัดพื้นหลังภายใน border-box เป็นค่าเริ่มต้น |
| 2 | padding-box ตัดพื้นหลังภายใน padding box |
| 3 | content-box พื้นหลังถูกตัดภายใน content box |
ตัวอย่าง (Example)
<!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>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม CHANGE CLIP:
