ตัวอย่าง
การตั้งค่าคุณสมบัติพื้นหลังที่แตกต่างกันในการประกาศ:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการจดชวเลขพื้นหลังทุกชุดคุณสมบัติพื้นหลังในการประกาศ
คุณสมบัติที่สามารถตั้งค่าเป็น: สีพื้นหลัง, ภาพพื้นหลัง, พื้นหลังตำแหน่งพื้นหลังขนาดพื้นหลังซ้ำ, พื้นหลังให้กำเนิดพื้นหลังคลิปและพื้นหลังแนบ
มันไม่สำคัญว่าถ้าค่าใดค่าหนึ่งดังกล่าวข้างต้นจะหายไปเช่นพื้นหลัง: # FF0000 url(smiley.gif) ; ได้รับอนุญาต.
| ค่าเริ่มต้น: | see individual properties |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| เวอร์ชัน: | CSS1 + new properties in CSS3 |
| ไวยากรณ์ javascript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 และรุ่นก่อนหน้านี้ไม่สนับสนุนภาพพื้นหลังในหลายองค์ประกอบหนึ่ง
หมายเหตุ: โปรดดูการสนับสนุนเบราว์เซอร์ของแต่ละบุคคลสำหรับค่าแต่ละด้านล่าง
CSS ไวยากรณ์
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;หมายเหตุ: หากหนึ่งในคุณสมบัติในการประกาศจดชวเลขเป็นทรัพย์สิน BG-ขนาดคุณต้องใช้ / (slash) ที่จะแยกได้จากทรัพย์สิน BG-ตำแหน่งเช่น background:url(smiley.gif) 10px 20px / 50px 50px ; จะส่งผลให้ภาพพื้นหลังในตำแหน่งที่ 10 จากซ้ายพิกเซล 20 พิกเซลจากด้านบนและขนาดของภาพจะเป็น 50 พิกเซลกว้างและสูง 50 พิกเซล
หมายเหตุ: หากใช้แหล่งภาพพื้นหลังหลาย แต่ยังต้องการสีพื้นหลังพารามิเตอร์สีพื้นหลังความต้องการที่จะเป็นครั้งสุดท้ายในรายการ
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | CSS |
|---|---|---|
| background-color | ระบุสีพื้นหลังเพื่อนำมาใช้ | 1 |
| background-image | ระบุหนึ่งหรือมากกว่าภาพพื้นหลังที่จะใช้ | 1 |
| background-position | ระบุตำแหน่งของภาพพื้นหลัง | 1 |
| background-size | ระบุขนาดของภาพพื้นหลัง | 3 |
| background-repeat | ระบุวิธีการทำซ้ำภาพพื้นหลัง | 1 |
| background-origin | ระบุพื้นที่การวางตำแหน่งของภาพพื้นหลัง | 3 |
| background-clip | ระบุพื้นที่การวาดภาพของภาพพื้นหลัง | 3 |
| background-attachment | ระบุว่าภาพพื้นหลังที่มีการแก้ไขหรือเลื่อนกับส่วนที่เหลือของหน้า | 1 |
| แรกเริ่ม | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | 3 |
| สืบทอด | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก | 2 |
หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS พื้นหลัง
กวดวิชา CSS3: พื้นหลัง CSS3
อ้างอิง HTML DOM: background property