ตัวอย่าง
รูปแบบพื้นหลังของเอกสาร:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top"; ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ชุดคุณสมบัติพื้นหลังหรือผลตอบแทนได้ถึงแปดคุณสมบัติพื้นหลังที่แยกจากกันในรูปแบบที่จดชวเลข
ด้วยคุณสมบัตินี้คุณสามารถตั้ง / กลับหนึ่งหรือมากกว่าหนึ่งดังต่อไปนี้ (ในลำดับใด ๆ ):
- สีพื้นหลัง
- ภาพพื้นหลัง
- พื้นหลังซ้ำ
- พื้นหลังแนบ
- พื้นหลังตำแหน่ง
- พื้นหลังขนาด
- พื้นหลังกำเนิด
- พื้นหลังคลิป
คุณสมบัติดังกล่าวข้างต้นยังสามารถตั้งค่าด้วยคุณสมบัติของสไตล์ที่แยกต่างหาก การใช้งานของคุณสมบัติที่แยกจากกันขอแนะนำสำหรับผู้เขียนไม่ใช่ขั้นสูงสำหรับการควบคุมที่ดีกว่า
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
หมายเหตุ: โปรดดูการสนับสนุนเบราว์เซอร์ของแต่ละบุคคลสำหรับค่าแต่ละด้านล่าง
วากยสัมพันธ์
คืนทรัพย์สินพื้นหลัง:
object .style.background
ตั้งค่าคุณสมบัติพื้นหลัง:
object .style.background=" ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ color ชุดสีพื้นหลังขององค์ประกอบ image การตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ repeat ชุดว่าภาพพื้นหลังจะต้องทำซ้ำ attachment กำหนดว่าจะให้ภาพพื้นหลังได้รับการแก้ไขหรือเลื่อนกับหน้า position กำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง size กำหนดขนาดของภาพพื้นหลัง origin ชุดพื้นที่การวางตำแหน่งพื้นหลัง clip กำหนดพื้นที่การวาดภาพของภาพพื้นหลัง initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: โปร่งใสไม่มีซ้ำเลื่อน 0% 0% อัตโนมัติ padding กล่องชายแดนกล่อง กลับค่า: เชือกคิดเป็นพื้นหลังของสิ่งนั้น ๆ CSS รุ่น CSS1 + ใหม่คุณสมบัติใน CSS3
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนพื้นหลังของส่วน div ที่:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center"; ลองตัวเอง»
ตัวอย่าง
ตั้งค่าภาพพื้นหลังสำหรับเอกสาร:
document.body.style.backgroundImage = "url('img_tree.png')"; ลองตัวเอง»
ตัวอย่าง
ตั้งค่าภาพพื้นหลังจะไม่มีการทำซ้ำ:
document.body.style.backgroundRepeat = "repeat-y"; ลองตัวเอง»
ตัวอย่าง
การตั้งค่าภาพพื้นหลังได้รับการแก้ไข (will not scroll) :
document.body.style.backgroundAttachment = "fixed"; ลองตัวเอง»
ตัวอย่าง
เปลี่ยนตำแหน่งของพื้นหลังภาพนี้:
document.body.style.backgroundPosition = "top right"; ลองตัวเอง»
หน้าเว็บที่เกี่ยวข้อง
CSS กวดวิชา: CSS พื้นหลัง
กวดวิชา CSS3: พื้นหลัง CSS3
อ้างอิง CSS: background property
<สไตล์วัตถุ