คุณสมบัติ background-origin ใช้เพื่อตั้งค่าหรือรับที่มาของพื้นหลัง เช่น ตำแหน่งสัมพัทธ์ สามารถสัมพันธ์กับพื้นที่รูปแบบกล่องใดก็ได้จากทั้งหมด 4 แบบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ backgroundOrigin -
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
คุณค่า
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
| Sr.No | ค่า &คำอธิบาย |
|---|---|
| 1 | ช่องว่างภายใน เพื่อให้ภาพพื้นหลังอยู่ในตำแหน่งที่สัมพันธ์กับช่องเติม เป็นค่าเริ่มต้น ค่าเริ่มต้น ภาพพื้นหลังอยู่ในตำแหน่งที่สัมพันธ์กับช่องเติม |
| 2 | เส้นขอบกล่อง เพื่อให้ภาพพื้นหลังอยู่ในตำแหน่งที่สัมพันธ์กับเส้นขอบกล่อง |
| 3 | กล่องเนื้อหา เพื่อให้ภาพพื้นหลังอยู่ในตำแหน่งที่สัมพันธ์กับช่องเนื้อหา |
| 4 | เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| 5 | สืบทอด เพื่อสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ backgroundOrigin -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
margin: 20px;
box-shadow: 0 0 5px black;
padding: 30px;
background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
font-size: 24px;
}
div>p {
box-shadow: 0 0 5px darkgrey;
}
</style>
<script>
function changeBackOrigin(){
document.getElementById("DIV1").style.backgroundOrigin="padding-box";
document.getElementById("Sample").innerHTML="The background origin is now set to to padding-box";
}
</script>
</head>
<body>
<h2>PowerBI Tutorial</h2>
<div id="DIV1">
<p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p>
</div>
<p>Change the above div background origin by clicking the below button</p>
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CHANGE ORIGIN -
