พื้นหลัง CSS3

พื้นหลัง CSS3

CSS3 มีคุณสมบัติหลายพื้นหลังใหม่ให้องค์ประกอบพื้นหลังการควบคุมมากขึ้น

ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติของพื้นหลังต่อไปนี้:

• ภาพพื้นหลัง
• พื้นหลังขนาด
• พื้นหลังกำเนิด
• พื้นหลังคลิป

นอกจากนี้คุณยังจะได้เรียนรู้วิธีการใช้ภาพพื้นหลังหลาย

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

CSS3 คุณสมบัติภาพพื้นหลัง

CSS3 สามารถเพิ่มภาพพื้นหลังผ่านคุณสมบัติภาพพื้นหลัง

ภาพพื้นหลังที่แตกต่างกันและภาพที่คั่นด้วยเครื่องหมายจุลภาคภาพทั้งหมดจะถูกแสดงที่ด้านบนของแรก

คุณสามารถกำหนดจำนวนของคุณสมบัติที่แตกต่างกันกับภาพที่แตกต่างกัน

CSS3 คุณสมบัติพื้นหลังขนาด

พื้นหลังขนาดระบุขนาดของภาพพื้นหลัง CSS3 ที่ผ่านมาขนาดภาพพื้นหลังจะถูกกำหนดโดยขนาดที่แท้จริงของภาพ

CSS3 สามารถระบุภาพพื้นหลังให้เราอีกครั้งระบุขนาดของภาพพื้นหลังในสภาพแวดล้อมที่แตกต่างกัน คุณสามารถระบุร้อยละหรือพิกเซลขนาด

คุณสามารถระบุขนาดที่สัมพันธ์กับความกว้างและความสูงของผู้ปกครองร้อยละขนาดองค์ประกอบ

ตัวอย่างที่ 1

รีเซ็ตภาพพื้นหลัง:

div
{
พื้นหลัง: URL (img_flwr.gif);
พื้นหลัง-size: 80px 60px;
พื้นหลังซ้ำ: ไม่มีซ้ำ;
}

ลอง»

ตัวอย่างที่ 2

ยืดภาพพื้นหลังเพื่อกรอกพื้นที่เนื้อหา:

div
{
พื้นหลัง: URL (img_flwr.gif);
พื้นหลัง-size: 100% 100%;
พื้นหลังซ้ำ: ไม่มีซ้ำ;
}

ลอง»

แอตทริบิวต์พื้นหลังแหล่งกำเนิดของ CSS3

แอตทริบิวต์พื้นหลังกำเนิดระบุตำแหน่งของพื้นที่ภาพพื้นหลัง

เนื้อหากล่องสามารถอยู่ภายในช่องว่างภายในกล่องและพื้นที่ชายแดนกล่องของภาพพื้นหลัง

ตัวอย่าง

การวางตำแหน่งภาพพื้นหลังในเนื้อหากล่อง:

div
{
พื้นหลัง: URL (img_flwr.gif);
พื้นหลังซ้ำ: ไม่มีซ้ำ;
พื้นหลัง-size: 100% 100%;
พื้นหลังกำเนิด: เนื้อหากล่อง;
}

ลอง»

ตัวอย่าง

ตั้งสองภาพพื้นหลังในองค์ประกอบของร่างกาย:

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

ลอง»

CSS3 คุณสมบัติพื้นหลังคลิป

CSS3 คุณสมบัติพื้นหลังพื้นหลังคลิปถูกตัดเพื่อเริ่มต้นการวาดภาพจากสถานที่ที่กำหนด

คุณสมบัติพื้นหลังใหม่