ใช้ CSS3 เพื่อยืดภาพพื้นหลังให้พอดีกับเว็บเพจ

ภาพเป็นส่วนสำคัญในการออกแบบเว็บไซต์ที่น่าสนใจ ซึ่งรวมถึงการใช้ภาพพื้นหลัง นี่คือภาพและกราฟิกที่ใช้ หลัง พื้นที่ของหน้าเว็บแทนที่จะเป็นภาพที่แสดงเป็นส่วนหนึ่งของหน้าเนื้อหา ภาพพื้นหลังเหล่านี้สามารถเพิ่มความสนใจในภาพไปยังหน้าเว็บและช่วยให้คุณได้ภาพที่คุณอาจมองหาในหน้าเว็บ

ถ้าคุณเริ่มต้นทำงานกับภาพพื้นหลังคุณจะต้องใช้ฉากที่คุณต้องการให้ภาพพอดีกับหน้า โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ที่มีการส่งมอบให้กับอุปกรณ์และขนาดหน้าจอที่หลากหลาย

ความปรารถนาที่จะยืดภาพพื้นหลังนี้เป็นความปรารถนาร่วมกันมากสำหรับนักออกแบบเว็บเนื่องจากไม่ได้ภาพทุกภาพพอดีในพื้นที่ของเว็บไซต์ แทนที่จะให้ขนาดคงที่การยืดภาพจะช่วยให้พอดีกับหน้ากระดาษไม่ว่าหน้าต่างเบราเซอร์จะกว้างหรือแคบ

วิธีที่ดีที่สุดในการยืดภาพให้พอดีกับพื้นหลังของหน้าเว็บคือการใช้คุณสมบัติ CSS3 สำหรับพื้นหลังขนาด นี่คือตัวอย่างที่ใช้ภาพพื้นหลังสำหรับเนื้อหาของหน้าเว็บและกำหนดขนาดเป็น 100% เพื่อให้พอดีกับหน้าจอเสมอ

ร่างกาย { พื้นหลัง: url (bgimage.jpg) no-repeat; พื้นหลังขนาด: 100%; }

ตาม caniuse.com คุณสมบัตินี้ทำงานได้ใน IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ และเบราว์เซอร์มือถือทุกรุ่น นี่หมายถึงคุณสำหรับเบราว์เซอร์ที่ทันสมัยทุกวันนี้ซึ่งหมายความว่าคุณควรใช้สถานที่นี้โดยไม่ต้องกลัวว่าจะไม่สามารถใช้งานได้บนหน้าจอของใครบางคน

การสร้างพื้นหลังที่ยืดเยื้อในเบราว์เซอร์รุ่นเก่า

ไม่น่าเป็นไปได้มากที่คุณจะต้องสนับสนุนเบราว์เซอร์ที่เก่ากว่า IE9 แต่สมมติว่าคุณกังวลว่า IE8 ไม่สนับสนุนคุณสมบัตินี้ ในกรณีดังกล่าวคุณสามารถปลอมภาพพื้นหลังแบบยืดได้ และคุณสามารถใช้คำนำหน้าของเบราว์เซอร์สำหรับ Firefox 3.6 (-moz พื้นหลังขนาด) และ Opera 10.0 (-o พื้นหลังขนาด).

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

id = "bg" />

1. ขั้นแรกตรวจสอบให้แน่ใจว่าเบราว์เซอร์ทั้งหมดมีความสูง 100%, 0 margins และ 0 padding ในและHTML ร่างกาย องค์ประกอบ วางข้อมูลต่อไปนี้ไว้ในส่วนหัวของเอกสาร HTML ของคุณ:
2. เพิ่มภาพที่คุณต้องการเป็นพื้นหลังเป็นองค์ประกอบแรกของหน้าเว็บและให้มัน รหัส ของ "bg":
3. วางภาพพื้นหลังเพื่อให้ได้รับการแก้ไขที่ด้านบนและด้านซ้ายและมีความกว้าง 100% และสูง 100% เพิ่มข้อมูลนี้ในสไตล์ชีตของคุณ:
   1. img # bg {
   3. ตำแหน่ง: คงที่;
   5. ด้านบน: 0;
   7. ซ้าย: 0;
   9. ความกว้าง: 100%;
   11. ความสูง: 100%;
   13. }
4. เพิ่มเนื้อหาทั้งหมดลงในเพจภายในของ a DIV องค์ประกอบที่มี a รหัส ของ "เนื้อหา" เพิ่ม DIV ด้านล่างภาพ:เนื้อหาทั้งหมดของคุณที่นี่รวมถึงส่วนหัวย่อหน้า ฯลฯ
   1. หมายเหตุ: ตอนนี้คุณสนใจที่จะดูหน้าเว็บของคุณแล้ว ภาพควรจะยืดออก แต่เนื้อหาของคุณหายไปอย่างสมบูรณ์ ทำไม? เนื่องจากภาพพื้นหลังมีความสูง 100% และการแบ่งเนื้อหาเป็น หลังจาก ภาพในการไหลของเอกสารเบราว์เซอร์ส่วนใหญ่จะไม่แสดงภาพ
5. วางตำแหน่งเนื้อหาของคุณเพื่อให้เป็นญาติและมี a ดัชนี z จาก 1 ซึ่งจะนำมาเหนือภาพพื้นหลังในเบราว์เซอร์ที่ได้มาตรฐาน เพิ่มข้อมูลนี้ในสไตล์ชีตของคุณ:
   1. #เนื้อหา {
   3. ตำแหน่ง: ญาติ;
   5. z-index: 1;
   7. }
6. แต่คุณไม่ได้ทำ Internet Explorer 6 ไม่สอดคล้องกับมาตรฐานและยังมีปัญหาอยู่ มีหลายวิธีในการซ่อน CSS จากทุกเบราว์เซอร์ แต่ IE6 แต่วิธีที่ง่ายที่สุด (และมีแนวโน้มที่จะทำให้เกิดปัญหาอื่น ๆ ) คือการใช้ความคิดเห็นโดยมีเงื่อนไข ใส่ข้อมูลต่อไปนี้หลังจากสไตล์ชีตของคุณอยู่ในส่วนหัวของเอกสาร:
7. ภายในความคิดเห็นที่เน้นเพิ่มแผ่นงานสไตล์อื่นที่มีลักษณะบางอย่างเพื่อให้ IE 6 เล่นได้ดี:
8. อย่าลืมทดสอบใน IE 7 และ IE 8 ด้วย คุณอาจต้องปรับความคิดเห็นเพื่อสนับสนุนพวกเขาเช่นกัน แต่ก็ทำงานเมื่อฉันทดสอบมัน

ตกลง - นี้เป็นที่ยอมรับ WAY overkill เว็บไซต์จำนวนน้อยมากจำเป็นต้องสนับสนุน IE 7 หรือ 8 อีกต่อไป IE6 น้อยมาก! ด้วยเหตุนี้วิธีนี้จึงเป็นแบบโบราณและไม่จำเป็นสำหรับคุณ ฉันปล่อยให้มันที่นี่มากขึ้นเป็นรูปแบบของความอยากรู้ว่าสิ่งที่ยากมากขึ้นก่อนที่เบราว์เซอร์ทั้งหมดของเราเล่นให้เข้ากันได้ดี!

การสร้างภาพพื้นหลังที่ยืดเยื้อกว่าพื้นที่ขนาดเล็ก

คุณสามารถใช้เทคนิคที่คล้ายกันเพื่อปลอมภาพพื้นหลังแบบยืดใน a DIV หรือองค์ประกอบอื่นบนหน้าเว็บของคุณ นี่เป็นบิตที่ยุ่งยากกว่าเนื่องจากคุณต้องใช้ตำแหน่งที่แน่นอนหรือมีปัญหาเว้นระยะห่างแปลก ๆ สำหรับส่วนอื่น ๆ ของหน้า

1. วางภาพบนหน้าเว็บที่ต้องการใช้เป็นพื้นหลัง
2. ในสไตล์ชีตให้ตั้งความกว้างและความสูงสำหรับภาพ โปรดทราบว่าคุณสามารถใช้เปอร์เซ็นต์ความกว้างหรือความสูงได้ แต่หาได้ง่ายขึ้นโดยปรับค่าความยาวสำหรับความสูง
   1. img # bg {
   3. ความกว้าง: 20em;
   5. สูง: 30 เมตร;
   7. }
3. วางเนื้อหาของคุณไว้ใน div ด้วย รหัส "เนื้อหา" ตามที่เราได้กล่าวมาข้างต้น:เนื้อหาทั้งหมดของคุณที่นี่
4. กำหนด div เนื้อหาให้มีความกว้างและความสูงเท่ากันกับภาพพื้นหลัง:
   1. div # เนื้อหา {
   3. ความกว้าง: 20em;
   5. สูง: 30 เมตร;
   7. }
5. จากนั้นวางเนื้อหาที่มีความสูงเท่ากับภาพดังนั้นหากภาพของคุณคือ 30EM คุณจะมีสไตล์ของด้านบน: -30em; อย่าลืมใส่ z-index เป็น 1 ในเนื้อหา
   1. #เนื้อหา {
   3. ตำแหน่ง: ญาติ;
   5. ด้านบน: -30em;
   7. z-index: 1;
   9. ความกว้าง: 20em;
   11. สูง: 30 เมตร;
   13. }
6. จากนั้นเพิ่ม z-index ของ -1 สำหรับผู้ใช้ IE 6 ตามที่คุณได้กล่าวข้างต้น:

อีกครั้งด้วยขนาดพื้นหลังที่เพลิดเพลินกับการสนับสนุนเบราว์เซอร์แบบกว้าง ๆ ในขณะนี้วิธีนี้อาจเป็นไปได้มากที่ไม่จำเป็นและนำเสนอเป็นผลิตภัณฑ์ในยุคที่ล่วงลับไปแล้ว หากคุณไม่ต้องการใช้วิธีนี้โปรดตรวจสอบให้แน่ใจว่าได้ทดสอบในเบราว์เซอร์นี้เท่าที่จะทำได้ และหากเนื้อหามีการเปลี่ยนแปลงขนาดคุณจะต้องเปลี่ยนขนาดของคอนเทนเนอร์และภาพพื้นหลังไม่เช่นนั้นคุณจะได้ผลลัพธ์ที่แปลกประหลาด