CSS หลายพื้นหลัง
ในบทนี้ คุณจะได้เรียนรู้วิธีเพิ่มภาพพื้นหลังหลายภาพในองค์ประกอบเดียว
คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติดังต่อไปนี้:
background-sizebackground-originbackground-clip
CSS หลายพื้นหลัง
CSS อนุญาตให้คุณเพิ่มรูปภาพพื้นหลังหลายรูปสำหรับองค์ประกอบ ผ่าน
background-imageคุณสมบัติ
รูปภาพพื้นหลังต่างๆ จะถูกคั่นด้วยเครื่องหมายจุลภาค และรูปภาพจะซ้อนกัน โดยที่รูปภาพแรกอยู่ใกล้กับผู้ดูมากที่สุด
ตัวอย่างต่อไปนี้มีภาพพื้นหลังสองภาพ ภาพแรกเป็นดอกไม้ (จัดชิดด้านล่างและขวา) และภาพที่สองเป็นพื้นหลังกระดาษ (จัดชิดมุมซ้ายบน):
ตัวอย่าง
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
สามารถระบุภาพพื้นหลังได้หลายภาพโดยใช้คุณสมบัติพื้นหลังแต่ละรายการ (ตามด้านบน) หรือbackgroundคุณสมบัติชวเลข
ตัวอย่างต่อไปนี้ใช้backgroundคุณสมบัติชวเลข (ผลลัพธ์เดียวกับตัวอย่างด้านบน):
ตัวอย่าง
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
ขนาดพื้นหลัง CSS
คุณสมบัติ CSS background-sizeอนุญาตให้คุณระบุขนาดของรูปภาพพื้นหลัง
ขนาดสามารถระบุเป็นความยาว เปอร์เซ็นต์ หรือโดยใช้หนึ่งในสองคำสำคัญ: มี หรือ ครอบคลุม
ตัวอย่างต่อไปนี้ปรับขนาดภาพพื้นหลังให้เล็กกว่าภาพต้นฉบับมาก (โดยใช้พิกเซล):
ขอบคุณพระองค์สำหรับความเจ็บปวด
ความเจ็บปวดคือความรัก
จึงเป็นเหตุให้เกิดขึ้นมาเพียงเล็กน้อยเท่านั้น ที่ซึ่งกิจปฏิบัติปกติของเราแบกรับผลที่ตามมา
นี่คือรหัส:
ตัวอย่าง
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
อีกสองค่าที่เป็นไปได้สำหรับbackground-sizeคือcontain
และcover
คีย์เวิร์ด จะcontainปรับขนาดภาพพื้นหลังให้ใหญ่ที่สุด (แต่ทั้งความกว้างและความสูงต้องพอดีในพื้นที่เนื้อหา) ดังนั้น ขึ้นอยู่กับสัดส่วนของภาพพื้นหลังและพื้นที่การวางตำแหน่งพื้นหลัง อาจมีบางพื้นที่ของพื้นหลังที่ภาพพื้นหลังไม่ครอบคลุม
คีย์เวิร์ด จะcoverปรับขนาดภาพพื้นหลังเพื่อให้พื้นที่เนื้อหาครอบคลุมโดยรูปภาพพื้นหลัง (ทั้งความกว้างและความสูงเท่ากับหรือเกินพื้นที่เนื้อหา) ด้วยเหตุนี้ บางส่วนของภาพพื้นหลังอาจไม่ปรากฏให้เห็นในพื้นที่วางตำแหน่งพื้นหลัง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้containและcover:
ตัวอย่าง
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
กำหนดขนาดของภาพพื้นหลังหลายภาพ
คุณสมบัติbackground-sizeยังยอมรับหลายค่าสำหรับขนาดพื้นหลัง (โดยใช้รายการที่คั่นด้วยเครื่องหมายจุลภาค) เมื่อทำงานกับพื้นหลังหลายรายการ
ตัวอย่างต่อไปนี้ระบุภาพพื้นหลังสามภาพ โดยมีค่าขนาดพื้นหลังต่างกันสำหรับแต่ละภาพ:
ตัวอย่าง
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
ภาพพื้นหลังขนาดเต็ม
ตอนนี้เราต้องการมีภาพพื้นหลังบนเว็บไซต์ที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมดตลอดเวลา
ข้อกำหนดมีดังนี้:
- เติมภาพให้เต็มหน้า (ไม่มีช่องว่าง)
- ปรับขนาดภาพตามต้องการ
- ภาพตรงกลางหน้า
- ไม่ให้เกิดแถบเลื่อน
ตัวอย่างต่อไปนี้แสดงวิธีการทำ ใช้องค์ประกอบ <html> (องค์ประกอบ <html> ต้องมีความสูงของหน้าต่างเบราว์เซอร์เป็นอย่างน้อย) จากนั้นตั้งค่าพื้นหลังที่คงที่และอยู่ตรงกลาง จากนั้นปรับขนาดด้วยคุณสมบัติขนาดพื้นหลัง:
ตัวอย่าง
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
ภาพฮีโร่
คุณยังสามารถใช้คุณสมบัติพื้นหลังที่แตกต่างกันใน <div> เพื่อสร้างรูปภาพฮีโร่ (รูปภาพขนาดใหญ่พร้อมข้อความ) และวางไว้ในตำแหน่งที่คุณต้องการ
ตัวอย่าง
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
คุณสมบัติที่มาพื้นหลัง CSS
คุณสมบัติ CSS background-originระบุตำแหน่งที่วางภาพพื้นหลัง
คุณสมบัติใช้ค่าที่แตกต่างกันสามค่า:
- border-box - ภาพพื้นหลังเริ่มจากมุมซ้ายบนของเส้นขอบ
- padding-box - (ค่าเริ่มต้น) ภาพพื้นหลังเริ่มจากมุมซ้ายบนของขอบช่องว่าง
- กล่องเนื้อหา - ภาพพื้นหลังเริ่มจากมุมซ้ายบนของเนื้อหา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงbackground-originคุณสมบัติ:
ตัวอย่าง
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
คุณสมบัติคลิปพื้นหลัง CSS
คุณสมบัติ CSS background-clipระบุพื้นที่การวาดภาพของพื้นหลัง
คุณสมบัติใช้ค่าที่แตกต่างกันสามค่า:
- border-box - (ค่าเริ่มต้น) พื้นหลังถูกทาสีไปที่ขอบด้านนอกของเส้นขอบ
- padding-box - พื้นหลังถูกทาสีไปที่ขอบด้านนอกของช่องว่างภายใน
- กล่องเนื้อหา - พื้นหลังถูกทาสีภายในกล่องเนื้อหา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงbackground-clipคุณสมบัติ:
ตัวอย่าง
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
คุณสมบัติพื้นหลังขั้นสูง CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |