คุณสมบัติ backgroundPosition ใช้สำหรับการตั้งค่าหรือรับตำแหน่งเริ่มต้นสำหรับภาพพื้นหลังขององค์ประกอบที่สัมพันธ์กับแหล่งกำเนิด
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ backgroundPosition -
object.style.backgroundPosition = value
คุณค่า
ต่อไปนี้เป็นค่า -
| ค่า | คำอธิบาย |
|---|---|
| ซ้ายบน ตัวกลางบน ขวาบน กลางซ้าย ศูนย์เซ็นเตอร์ กลางขวา ล่างซ้าย ตรงกลางด้านล่าง ล่างขวา | ชื่อตำแหน่งสามารถเข้าใจได้ หากคุณเขียนค่าเพียงค่าเดียว อีกค่าหนึ่งก็จะอยู่ตรงกลางเสมอ |
| xpos ypos | เพื่อระบุตำแหน่งแนวนอน(x) และแนวตั้ง(y) เริ่มจากมุมบนซ้ายด้วย 0,0 ควรใช้พิกเซลเป็นหน่วยแม้ว่าคุณจะสามารถใช้หน่วย CSS อื่นได้เช่นกัน |
| x% y% | เพื่อระบุตำแหน่งในตำแหน่งแนวนอน(x) และแนวตั้ง(y) ในแง่ของเปอร์เซ็นต์ เริ่มจากซ้ายบน 0% 0% และคอร์เน็ตขวาล่าง 100% 100% เนื่องจากการระบุค่าหนึ่งหมายความว่าอีกค่าหนึ่งจะอยู่กึ่งกลาง กล่าวคือ จะอยู่ที่ 50% |
| ค่าเริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | หากต้องการรับค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ backgroundPosition -
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มเปลี่ยนตำแหน่ง -
