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

ให้ความสนใจกับภาพพื้นหลังของเว็บไซต์ด้วยกราฟิกพื้นหลัง

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

ถ้าคุณเริ่มต้นทำงานกับภาพพื้นหลังคุณจะต้องใช้ฉากที่คุณต้องการให้ภาพพอดีกับหน้า

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

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

วิธีที่ดีที่สุดในการยืดภาพให้พอดีกับพื้นหลังของหน้าเว็บคือการใช้คุณสมบัติ 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-background-size) และ Opera 10.0 (-o-background-size)

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

id = "bg" />

1. ขั้นแรกตรวจสอบให้แน่ใจว่าเบราว์เซอร์ทั้งหมดมีความสูง 100%, 0 margins และ 0 padding บนองค์ประกอบ HTML BODY วางข้อมูลต่อไปนี้ไว้ในส่วนหัวของเอกสาร HTML ของคุณ:

2. เพิ่มภาพที่คุณต้องการเป็นพื้นหลังเป็นองค์ประกอบแรกของเว็บเพจและระบุ รหัส ของ "bg":

3. วาง ภาพพื้นหลัง เพื่อให้ได้รับการแก้ไขที่ด้านบนและด้านซ้ายและมีความกว้าง 100% และสูง 100% เพิ่มข้อมูลนี้ในสไตล์ชีตของคุณ:

   img # bg {
   ตำแหน่ง: คงที่;
   ด้านบน: 0;
   ซ้าย: 0;
   ความกว้าง: 100%;
   ความสูง: 100%;
   }

4. เพิ่มเนื้อหาทั้งหมดของคุณลงในเพจภายในองค์ประกอบ DIV โดยมีรหัส "เนื้อหา" เพิ่ม DIV ด้านล่างภาพ:

   เนื้อหาทั้งหมดของคุณที่นี่รวมถึงส่วนหัวย่อหน้า ฯลฯ

   หมายเหตุ: ตอนนี้คุณสนใจที่จะดูหน้าเว็บของคุณแล้ว ภาพควรจะยืดออก แต่เนื้อหาของคุณหายไปอย่างสมบูรณ์ ทำไม? เนื่องจากภาพพื้นหลังมีความสูง 100% และส่วนเนื้อหาจะอยู่ หลัง ภาพในการไหลของเอกสาร - เบราว์เซอร์ส่วนใหญ่จะไม่แสดงภาพ
   
5. วางตำแหน่งเนื้อหาของคุณเพื่อให้เป็นสัมพัทธ์และมี ดัชนี z- 1 ซึ่งจะนำมาวางไว้เหนือภาพพื้นหลังในเบราว์เซอร์ที่เป็นไปตามมาตรฐาน เพิ่มข้อมูลนี้ในสไตล์ชีตของคุณ:

   #เนื้อหา {
   ตำแหน่ง: ญาติ;
   z-index: 1;
   }

1. แต่คุณไม่ได้ทำ Internet Explorer 6 ไม่สอดคล้องกับมาตรฐานและยังมีปัญหาอยู่ มีหลายวิธีในการซ่อน CSS จากทุกเบราว์เซอร์ แต่ IE6 แต่วิธีที่ง่ายที่สุด (และมีแนวโน้มที่จะทำให้เกิดปัญหาอื่น ๆ ) คือการใช้ความคิดเห็นโดยมีเงื่อนไข ใส่ข้อมูลต่อไปนี้หลังจากสไตล์ชีตของคุณอยู่ในส่วนหัวของเอกสาร:

2. ภายในความคิดเห็นที่เน้นเพิ่มแผ่นงานสไตล์อื่นที่มีลักษณะบางอย่างเพื่อให้ IE 6 เล่นได้ดี:

3. อย่าลืมทดสอบใน IE 7 และ IE 8 ด้วย คุณอาจต้องปรับความคิดเห็นเพื่อสนับสนุนพวกเขาเช่นกัน แต่ก็ทำงานเมื่อฉันทดสอบมัน

ตกลง - นี้เป็นที่ยอมรับ WAY overkill เว็บไซต์จำนวนน้อยมากจำเป็นต้องสนับสนุน IE 7 หรือ 8 อีกต่อไป IE6 น้อยมาก!

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

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

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

1. วางภาพบนหน้าเว็บที่ต้องการใช้เป็นพื้นหลัง

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

   img # bg {
   ความกว้าง: 20em;
   สูง: 30 เมตร;
   }

3. วางเนื้อหาของคุณไว้ใน div ที่มี id "content" ตามที่เราได้กล่าวไว้ข้างต้น:

   เนื้อหาทั้งหมดของคุณที่นี่

4. กำหนด div เนื้อหาให้มีความกว้างและความสูงเท่ากันกับภาพพื้นหลัง:

   div # เนื้อหา {
   ความกว้าง: 20em;
   สูง: 30 เมตร;
   }

5. จากนั้นวางเนื้อหาที่มีความสูงเท่ากับภาพ ดังนั้นหากภาพของคุณคือ 30EM คุณจะมีสไตล์ของด้านบน: -30em; อย่าลืมใส่ z-index เป็น 1 ในเนื้อหา

   #เนื้อหา {
   ตำแหน่ง: ญาติ;
   ด้านบน: -30em;
   z-index: 1;
   ความกว้าง: 20em;
   สูง: 30 เมตร;
   }

6. จากนั้นเพิ่ม z-index ของ -1 สำหรับผู้ใช้ IE 6 ตามที่คุณได้กล่าวข้างต้น:

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

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