สไตล์พื้นหลังคุณสมบัติ
ตัวอย่าง
จัดรูปแบบพื้นหลังของเอกสาร:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติพื้นหลังตั้งค่าหรือส่งคืนคุณสมบัติพื้นหลังแยกกันมากถึงแปดคุณสมบัติ ในรูปแบบชวเลข
ด้วยคุณสมบัตินี้ คุณสามารถตั้งค่า/ส่งคืนอย่างน้อยหนึ่งรายการต่อไปนี้ (ในลำดับใดก็ได้):
- สีพื้นหลัง
- ภาพพื้นหลัง
- พื้นหลัง-ซ้ำ
- ไฟล์แนบพื้นหลัง
- พื้นหลังตำแหน่ง
- ขนาดพื้นหลัง
- ที่มาของพื้นหลัง
- เบื้องหลังคลิป
คุณสมบัติข้างต้นสามารถตั้งค่าด้วยคุณสมบัติสไตล์ที่แยกจากกัน ขอแนะนำให้ใช้คุณสมบัติแยกกันสำหรับผู้เขียนที่ไม่ขั้นสูงเพื่อการควบคุมที่ดีขึ้น
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| 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"
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | โปร่งใส ไม่มี เลื่อนซ้ำ 0% 0% auto padding-box border-box |
|---|---|
| คืนมูลค่า: | สตริงที่แสดงถึงพื้นหลังขององค์ประกอบ |
| เวอร์ชัน CSS | CSS1 + คุณสมบัติใหม่ใน CSS3 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เปลี่ยนพื้นหลังขององค์ประกอบ DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
ตัวอย่าง
ตั้งค่าสีพื้นหลังสำหรับเอกสาร:
document.body.style.backgroundColor = "red";
ตัวอย่าง
ตั้งค่าภาพพื้นหลังสำหรับเอกสาร:
document.body.style.backgroundImage = "url('img_tree.png')";
ตัวอย่าง
ตั้งค่า background-image เป็น no-repeat:
document.body.style.backgroundRepeat = "repeat-y";
ตัวอย่าง
ตั้งค่าภาพพื้นหลังให้คงที่ (จะไม่เลื่อน):
document.body.style.backgroundAttachment = "fixed";
ตัวอย่าง
เปลี่ยนตำแหน่งของภาพพื้นหลัง:
document.body.style.backgroundPosition = "top right";
ตัวอย่าง
ส่งกลับค่าคุณสมบัติพื้นหลังของเอกสาร:
document.body.style.background;
หน้าที่เกี่ยวข้อง
กวดวิชาCSS: พื้นหลัง CSS
กวดวิชาCSS3: พื้นหลัง CSS3
การอ้างอิง CSS: คุณสมบัติพื้นหลัง