คุณสมบัติพื้นหลัง CSS
ตัวอย่าง
ตั้งค่าคุณสมบัติพื้นหลังที่แตกต่างกันในหนึ่งประกาศ:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
ความหมายและการใช้งาน
backgroundทรัพย์สินเป็นทรัพย์สินชวเลขสำหรับ:
- สีพื้นหลัง
- ภาพพื้นหลัง
- พื้นหลังตำแหน่ง
- ขนาดพื้นหลัง
- พื้นหลัง-ซ้ำ
- ที่มาของพื้นหลัง
- เบื้องหลังคลิป
- ไฟล์แนบพื้นหลัง
ไม่สำคัญว่าค่าใดค่าหนึ่งข้างต้นจะหายไป เช่น background:#ff0000 url(smiley.gif); ได้รับอนุญาต.
| ค่าเริ่มต้น: | ดูคุณสมบัติส่วนบุคคล |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS1 + คุณสมบัติใหม่ใน CSS3 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.background="red url(smiley.gif) ซ้ายบน ห้ามทำซ้ำ" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
หมายเหตุ:ดูการสนับสนุนเบราว์เซอร์แต่ละรายการสำหรับแต่ละค่าด้านล่าง
ไวยากรณ์ CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
หมายเหตุ:หากคุณสมบัติหนึ่งในการประกาศชวเลขเป็นคุณสมบัติ bg-size คุณต้องใช้ / (สแลช) เพื่อแยกมันออกจากคุณสมบัติตำแหน่ง bg เช่น background:url(smiley.gif) 10px 20px/50px 50px ; จะส่งผลให้ภาพพื้นหลังวางตำแหน่ง 10 พิกเซลจากด้านซ้าย 20 พิกเซลจากด้านบนและขนาดของภาพจะกว้าง 50 พิกเซลและสูง 50 พิกเซล
หมายเหตุ:หากใช้แหล่งที่มาของรูปภาพพื้นหลังหลายแหล่งแต่ต้องการสีพื้นหลังด้วย พารามิเตอร์สีพื้นหลังจะต้องอยู่ในรายการสุดท้าย
มูลค่าทรัพย์สิน
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: พื้นหลัง CSS , พื้น หลัง CSS (ขั้นสูง)
การอ้างอิง HTML DOM: คุณสมบัติพื้นหลัง