พื้นหลัง CSS3
CSS3 มีไม่กี่คุณสมบัติพื้นหลังใหม่ซึ่งจะช่วยให้การควบคุมมากขึ้นขององค์ประกอบพื้นหลัง
ในบทนี้คุณจะได้เรียนรู้วิธีการเพิ่มภาพพื้นหลังหลายองค์ประกอบหนึ่ง
นอกจากนี้คุณยังจะได้เรียนรู้เกี่ยวกับคุณสมบัติของ CSS3 ใหม่ต่อไปนี้:
-
background-size
-
background-origin
-
background-clip
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
คุณสมบัติ | |||||
---|---|---|---|---|---|
background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
ภูมิหลังหลาย CSS3
CSS3 ช่วยให้คุณเพิ่มภาพพื้นหลังหลายองค์ประกอบผ่าน 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;
}
ลองตัวเอง» ขนาด CSS3 พื้นหลัง
CSS3 background-size
คุณสมบัติช่วยให้คุณระบุขนาดของภาพพื้นหลัง
ก่อน CSS3 ขนาดของภาพพื้นหลังเป็นขนาดที่แท้จริงของภาพ CSS3 ช่วยให้เราสามารถกลับมาใช้ภาพพื้นหลังในบริบทที่แตกต่าง
ขนาดสามารถระบุได้ในความยาวร้อยละหรือโดยใช้หนึ่งในสองคำสำคัญ: มีหรือฝาครอบ
ตัวอย่างต่อไปนี้ปรับขนาดภาพพื้นหลังจะมีขนาดเล็กกว่าภาพต้นฉบับ (ใช้พิกเซล):
ภาพพื้นหลังเดิม:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
ภาพพื้นหลังปรับขนาด:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
นี่คือรหัส:
ตัวอย่าง
#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
คุณสมบัติยังยอมรับค่าหลายขนาดพื้นหลัง (ใช้รายการคั่นด้วยเครื่องหมายจุลภาค) เมื่อทำงานกับภูมิหลังหลาย
ตัวอย่างต่อไปนี้ได้สามภาพพื้นหลังที่ระบุมีที่แตกต่างกัน background-size ค่าสำหรับแต่ละภาพ:
ตัวอย่าง
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
ลองตัวเอง» เต็มขนาดภาพพื้นหลัง
ตอนนี้เราต้องการที่จะมีภาพพื้นหลังบนเว็บไซต์ที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมดตลอดเวลา
ข้อกำหนดดังต่อไปนี้:
- เติมเต็มทั้งหน้ากับภาพ (ไม่มีช่องว่างสีขาว)
- ภาพชั่งตามความจำเป็น
- ภาพ Center ได้ที่หน้า
- ไม่ก่อให้เกิดเลื่อน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะทำมัน ใช้องค์ประกอบของ html (องค์ประกอบ HTML อยู่เสมออย่างน้อยสูงของหน้าต่างเบราว์เซอร์) จากนั้นตั้งค่าพื้นหลังคงที่และมีศูนย์กลางอยู่ที่มัน จากนั้นปรับขนาดกับ background-size ทรัพย์สิน:
ตัวอย่าง
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
}
ลองตัวเอง» CSS3 background-origin ทรัพย์สิน
CSS3 background-origin
อสังหาริมทรัพย์ระบุว่าภาพพื้นหลังอยู่ในตำแหน่ง
สถานที่ให้บริการจะใช้เวลาสามค่าที่แตกต่างกัน
- border-box - ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของเส้นขอบ
- padding-box - (เริ่มต้น) ภาพพื้นหลังเริ่มต้นจากมุมซ้ายบนของขอบช่องว่างภายใน
- content-box - ภาพพื้นหลังเริ่มจากมุมบนซ้ายของเนื้อหา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง background-origin
ทรัพย์สิน:
ตัวอย่าง
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
ลองตัวเอง» CSS3 background-clip ทรัพย์สิน
CSS3 background-clip
คุณสมบัติระบุพื้นที่ของการวาดภาพพื้นหลัง
สถานที่ให้บริการจะใช้เวลาสามค่าที่แตกต่างกัน
- border-box - (เริ่มต้น) พื้นหลังจะทาสีให้ขอบนอกของเส้นขอบ
- padding-box - พื้นหลังเป็นภาพวาดที่ขอบด้านนอกของช่องว่างภายใน
- content-box - พื้นหลังทาสีภายในกล่องเนื้อหา
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง background-clip
ทรัพย์สิน:
ตัวอย่าง
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
CSS3 คุณสมบัติพื้นหลัง
คุณสมบัติ | ลักษณะ |
---|---|
background | สถานที่ให้บริการจดชวเลขสำหรับการตั้งค่าทั้งหมดคุณสมบัติพื้นหลังในการประกาศ |
background-clip | ระบุพื้นที่ของการวาดภาพพื้นหลัง |
background-image | ระบุหนึ่งหรือมากกว่าภาพพื้นหลังสำหรับองค์ประกอบ |
background-origin | ระบุตำแหน่งที่ภาพพื้นหลัง (s) / อยู่ในตำแหน่ง |
background-size | ระบุขนาดของภาพพื้นหลัง (s) |