ตัวอย่าง
เปลี่ยนตำแหน่งของพื้นหลังภาพนี้:
document.body.style.backgroundPosition = "top right"; ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ชุดคุณสมบัติ backgroundPosition หรือผลตอบแทนที่ตำแหน่งของภาพพื้นหลังภายในองค์ประกอบ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| backgroundPosition | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
วากยสัมพันธ์
กลับ backgroundPosition ทรัพย์สิน:
object .style.backgroundPosition
ตั้ง backgroundPosition ทรัพย์สิน:
object .style.backgroundPosition= value ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | ถ้าคุณเพียงระบุคำหลักหนึ่งค่าอื่น ๆ จะ "center" |
| x% y% | ค่า x บ่งชี้ตำแหน่งในแนวนอนและความคุ้มค่า y ที่ระบุตำแหน่งแนวตั้ง ที่มุมบนซ้ายคือ 0% 0% ที่มุมด้านล่างขวาเป็น 100% 100% ถ้าคุณเพียงระบุค่าหนึ่งค่าอื่น ๆ จะ 50% |
| xpos ypos | ค่า x บ่งชี้ตำแหน่งในแนวนอนและความคุ้มค่า y ที่ระบุตำแหน่งแนวตั้ง ที่มุมบนซ้ายคือ 0 0. หน่วยสามารถพิกเซล (0px 0px) หรือหน่วยงานอื่น ๆ CSS ถ้าคุณเพียงระบุค่าหนึ่งค่าอื่น ๆ จะ 50% คุณสามารถผสม% และหน่วยงาน |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | 0% 0% |
|---|---|
| กลับค่า: | สตริงที่เป็นตัวแทนของตำแหน่งของพื้นหลังภาพ |
| CSS รุ่น | CSS1 |
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนตำแหน่งของภาพพื้นหลังในส่วน <div> องค์ประกอบไปที่ด้านล่างศูนย์:
document.getElementById("myDiv").style.backgroundPosition = "center bottom"; ลองตัวเอง» ตัวอย่าง
เปลี่ยนตำแหน่งของภาพพื้นหลังในส่วน <div> องค์ประกอบ 200px แนวนอนและแนวตั้ง 40px:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
ลองตัวเอง» ตัวอย่าง
กลับตำแหน่งของภาพพื้นหลังในส่วน <div> องค์ประกอบ:
document.getElementById("myDiv").style.backgroundPosition;
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
CSS กวดวิชา: CSS พื้นหลัง
อ้างอิง CSS: background-image property
อ้างอิง CSS: background-position property
อ้างอิง HTML DOM: background property
<สไตล์วัตถุ