การปรับขนาดพื้นหลัง ขอขนาดพื้นหลังใหญ่ๆ หน่อย! ซีเอสเอส

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

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

ข้าว. 1. ประเภทของภาพพื้นหลังขึ้นอยู่กับค่าขนาดพื้นหลัง

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

ตัวอย่างที่ 1 ตั้งค่าภาพพื้นหลังที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมด

ตัวอย่างที่ 1 ภาพพื้นหลัง

การปรับขนาดพื้นหลัง

ผลลัพธ์ ตัวอย่างนี้แสดงในรูป 2. เมื่อคุณปรับขนาดหน้าต่าง รูปภาพจะขยายหรือย่อจนเต็มหน้าเว็บ

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

ตัวอย่างภาพพื้นหลังจำนวนเต็มตอบสนอง

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

หากคุณต้องการบรรลุผลลัพธ์ที่คล้ายกันในโครงการเว็บถัดไปของคุณ บทความนี้คือสิ่งที่คุณต้องการ

หลักการพื้นฐาน

นี่คือแผนปฏิบัติการของเรา

ใช้คุณสมบัติขนาดพื้นหลังเพื่อเติมเต็มวิวพอร์ต

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

ใช้คิวรีสื่อเพื่อจัดการภาพพื้นหลังขนาดเล็กสำหรับอุปกรณ์มือถือ

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

รูปภาพที่ฉันใช้ในการสาธิตมีความละเอียด 5500x3600px ความละเอียดนี้เพียงพอสำหรับจอไวด์สกรีนส่วนใหญ่ จอคอมพิวเตอร์, ปัจจุบันมีวางจำหน่ายแล้ว. แต่สำหรับสิ่งนี้ คุณจะต้องประมวลผลไฟล์ขนาด 1.7MB

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

HTML

สิ่งที่คุณต้องการสำหรับมาร์กอัปคือ:

เราจะแต่งตั้ง ภาพพื้นหลังสำหรับองค์ประกอบเนื้อหาเพื่อให้รูปภาพเต็มวิวพอร์ตของเบราว์เซอร์เสมอ

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

ซีเอสเอส

ตั้งค่าสไตล์ต่อไปนี้สำหรับองค์ประกอบเนื้อหา:

body ( /* เส้นทางไปยังรูปภาพ */ background-image: url(images/พื้นหลัง-photo.jpg); /* ภาพพื้นหลังจะจัดกึ่งกลางแนวตั้งและแนวนอนเสมอ */ ตำแหน่งพื้นหลัง: กึ่งกลางกึ่งกลาง; /* ภาพพื้นหลัง ไม่ซ้ำกัน * / background-repeat: no-repeat; /* ภาพพื้นหลังได้รับการแก้ไขในวิวพอร์ต ดังนั้นจึงไม่เคลื่อนไหวเมื่อความสูงของเนื้อหามากกว่าความสูงของรูปภาพ */ การแนบพื้นหลัง: แก้ไขแล้ว; นี่คือสิ่งที่ทำให้ภาพพื้นหลังสามารถปรับให้เข้ากับขนาดของคอนเทนเนอร์ได้ */ background-size: cover; /* Set สีพื้นหลังซึ่งจะแสดงในขณะที่กำลังโหลดภาพพื้นหลัง */ background-color: #464646; -

ร่างกาย(

/* เส้นทางไปยังรูปภาพ */

พื้นหลัง - รูปภาพ : url (รูปภาพ / พื้นหลัง - รูปภาพ .jpg ) ;

/* ภาพพื้นหลังจะจัดกึ่งกลางแนวตั้งและแนวนอนเสมอ */

/* ภาพพื้นหลังไม่ซ้ำกัน */

พื้นหลัง - ทำซ้ำ : ไม่ - ทำซ้ำ ;

/* ภาพพื้นหลังได้รับการแก้ไขในวิวพอร์ตแล้ว จึงไม่เลื่อนเมื่อความสูงของเนื้อหามากกว่าความสูงของภาพ */

/* นี่คือสิ่งที่ทำให้ภาพพื้นหลังปรับขนาดคอนเทนเนอร์ได้ */

พื้นหลัง - ขนาด : ปก ;

/* กำหนดสีพื้นหลังที่จะแสดงขณะกำลังโหลดภาพพื้นหลัง */

พื้นหลัง - สี : #464646;

คู่ทรัพย์สิน/มูลค่าที่สำคัญที่สุดที่ควรคำนึงถึงคือ:

ขนาดพื้นหลัง: ปก;

พื้นหลัง - ขนาด : ปก ;

นี่คือจุดเริ่มต้นของความมหัศจรรย์ คู่คุณสมบัติ/ค่านี้บอกให้เบราว์เซอร์ปรับขนาดภาพพื้นหลังตามสัดส่วน เช่น เพื่อให้ความกว้างและความสูงเท่ากับหรือมากกว่าความกว้าง/ความสูงขององค์ประกอบ (ในกรณีของเราคือองค์ประกอบเนื้อหา)

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

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

ตำแหน่งพื้นหลัง: กึ่งกลาง;

พื้นหลัง - ตำแหน่ง : ศูนย์กลาง ศูนย์กลาง ;

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

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

สิ่งที่แนบมากับพื้นหลัง: แก้ไขแล้ว;

พื้นหลัง - ไฟล์แนบ: แก้ไขแล้ว;

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

ชวเลข CSS

ฉันได้ให้รายละเอียดคุณสมบัติพื้นหลังเพื่อให้อธิบายได้ง่ายขึ้น แบบฟอร์มย่อจะเทียบเท่า:

ร่างกาย ( พื้นหลัง: url (พื้นหลัง - ภาพถ่าย.jpg) ฝาครอบตรงกลาง ไม่ทำซ้ำ; )

ร่างกาย(

พื้นหลัง : url (พื้นหลัง - ภาพถ่าย .jpg ) ฝาครอบตรงกลาง ไม่ - แก้ไขซ้ำ;

สิ่งที่คุณต้องทำคือเปลี่ยนค่า URL ให้ชี้ไปที่ภาพพื้นหลังของคุณ

ทางเลือก: คิวรีสื่อสำหรับหน้าจอขนาดเล็ก

สำหรับหน้าจอขนาดเล็กที่ผมใช้ โปรแกรมโฟโต้ชอปเพื่อย่อขนาดภาพพื้นหลังดั้งเดิมตามสัดส่วนเป็น 768x505px และฉันก็ใช้ Smush.it เพื่อลดขนาดอีกเล็กน้อย ด้วยเหตุนี้ ขนาดไฟล์จึงลดลงจาก 1741KB เป็น 114KB เหล่านั้น. ขนาดภาพลดลง 93%

โปรดอย่าเข้าใจฉันผิด ขนาด 114KB ยังมีอีกมากสำหรับองค์ประกอบการออกแบบที่สวยงามล้วนๆ เมื่อพิจารณาถึงการโหลดเพิ่มเติมที่ 114KB ฉันจะใช้ไฟล์ดังกล่าวก็ต่อเมื่อฉันเห็นโอกาสในการปรับปรุงประสบการณ์ผู้ใช้ (UX) ของไซต์ได้อย่างมาก เนื่องจาก... วี ช่วงเวลาปัจจุบันส่วนแบ่งสำคัญของการรับส่งข้อมูลอินเทอร์เน็ตมาจากรูปภาพของอุปกรณ์มือถือ: url (images/พื้นหลัง-photo-mobile-devices.jpg);

คิวรีสื่อมีขีดจำกัดความกว้างที่ความกว้างสูงสุด: 767px ซึ่งหมายความว่าหากวิวพอร์ตของเบราว์เซอร์มีขนาดใหญ่กว่า 767px ภาพพื้นหลังขนาดใหญ่จะถูกโหลด

ข้อเสียของการใช้คิวรีสื่อนี้คือ หากคุณเปลี่ยนความกว้างของหน้าต่างเบราว์เซอร์ เช่น จาก 1200px เป็น 640px (หรือกลับกัน) คุณจะเห็นทันทีที่รูปภาพพื้นหลังขนาดเล็กหรือใหญ่โหลดขึ้นมา

นอกจากนี้เนื่องจากอุปกรณ์หน้าจอขนาดเล็กบางรุ่นอาจแสดงผลได้ มากกว่าพิกเซล เช่น iPhone 5 c จอแสดงผลเรตินาสามารถแสดงความละเอียด 1136x640px - ภาพพื้นหลังขนาดเล็กจะเป็นพิกเซล

เพื่อสรุปมันขึ้นมา

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

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

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

เคล็ดลับนี้คือการตั้งค่าเปอร์เซ็นต์การเติม ( ช่องว่างภายใน) องค์ประกอบ. วิธีการนี้ได้รับการเผยแพร่ครั้งแรกในบทความบล็อกเก่า A List Apart แต่ก็ยังใช้งานได้ดี

สมมติว่าคุณมีภาพพื้นหลังขนาด 800 x 450 พิกเซล และคุณต้องการทำให้เป็นพื้นหลังด้วยอัตราส่วนคงที่ที่ 16:9 รหัสด้านล่างใช้สำหรับการเยื้อง พิกเซลแต่ทุกอย่างจะได้ผลด้วย em- นอกจากนี้ยังมีองค์ประกอบรูป HTML5 สำหรับ การดำเนินการที่ถูกต้องในเบราว์เซอร์รุ่นเก่าคุณสามารถใช้ HTML5 shiv ได้

Div.column ( ความกว้างสูงสุด: 800px; ) รูป.อัตราส่วนคงที่ ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

การเพิ่มพื้นหลัง

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

Div.column ( /* The ภาพพื้นหลังต้องมีความกว้าง 800px */ ความกว้างสูงสุด: 800px; ) รูป.อัตราส่วนคงที่ ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); ขนาดพื้นหลัง: ปก; -moz-พื้นหลัง-ขนาด: ปก; /* Firefox 3.6 */ ตำแหน่งพื้นหลัง: กึ่งกลาง;

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

ตัวอย่างเช่น รูปภาพที่มีความกว้าง 800 x 200 พิกเซล (4:1) หน้าจอขนาดเล็กที่มีความกว้าง 300 พิกเซล ควรลดลงเหลือ 150 พิกเซล (2:1) มานับคุณสมบัติกันดีกว่า ความสูงและ ช่องว่างด้านบน:

รูปภาพแสดงอัตราส่วนภาพของภาพพื้นหลังเมื่อ ความกว้างที่แตกต่างกัน- ความชันของกราฟสอดคล้องกับคุณลักษณะ ช่องว่างด้านบน, ความสูงเริ่มต้น - ถึงแอตทริบิวต์ ความสูง- รหัสผลลัพธ์คือ:

Div.column ( /* ภาพพื้นหลังต้องมีความกว้าง 800px */ ความกว้างสูงสุด: 800px; ) รูป.fluidratio ( padding-top: 10%; /* ความชัน */ ความสูง: 120px; /* ความสูงเริ่มต้น */ พื้นหลัง- รูปภาพ: url(http://voormedia.com/examples/amsterdam.jpg); ขนาดพื้นหลัง: ปก; -moz-พื้นหลัง-ขนาด: ปก; /* Firefox 3.6 */ ตำแหน่งพื้นหลัง: กึ่งกลาง /* Internet Explorer 7 /8 */ )

การใช้ SCSS ในการคำนวณ

คุณสมบัติ ช่องว่างด้านบนและ ความสูงสามารถคำนวณได้โดยอัตโนมัติโดยใช้ตัวประมวลผลล่วงหน้าเช่น SCSS ตัวอย่างของสิ่งนี้:

/* คำนวณอัตราส่วนของเหลวตามสองมิติ (ความกว้าง/ความสูง) */ @mixin Fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -ขนาดเล็ก: nth($ขนาดเล็ก, 1); $height-large: nth($ขนาดใหญ่, 2); $height-small: nth($ขนาดเล็ก, 2); / ($width-large - $width-small); $height-small - $width-small * $slope; 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) รูป.fluidratio ( /* องค์ประกอบนี้จะมีอัตราส่วนของเหลวจาก 4:1 ที่ 800px ถึง 2:1 ที่ 300px. */ @ รวมอัตราส่วนของเหลว (800px 200px, 300px 150px); ภาพพื้นหลัง: url (http://voormedia.com/examples/amsterdam.jpg);

เทคโนโลยีเว็บ เช่นเดียวกับเทรนด์การออกแบบต่างๆ ไม่ได้หยุดนิ่ง ดังนั้นทุกครั้งที่มีคุณลักษณะดั้งเดิมและความแตกต่างสำหรับเว็บไซต์ปรากฏขึ้น หนึ่งใน “ทิศทาง” เหล่านี้คือการใช้พื้นหลัง (แบ็คกราวด์) ซึ่งขยายทั่วทั้งหน้าจอทั้งด้านความกว้างและความสูง ฉันบอกประมาณประมาณหนึ่งปีที่แล้ว - รูปภาพถูกวางไว้ในส่วนหัวของบล็อกและ "เปลี่ยน" เป็นสีพื้นหลังหลักของหน้าเว็บอย่างราบรื่น หากต้องการคุณสามารถเพิ่มได้

การวางรูปภาพขนาดใหญ่ที่ปรับขนาดได้เป็นพื้นหลังถือเป็นวิธีใหม่และซับซ้อนยิ่งขึ้น ซึ่งเป็นวิธีแก้ปัญหาที่ฉันพบในบทความนี้

เป้า บทเรียนนี้วางภาพพื้นหลังบนเว็บไซต์ซึ่งจะครอบคลุมพื้นหลังทั้งหมดของหน้าต่างเบราว์เซอร์อย่างต่อเนื่อง สิ่งที่ต้องทำจริงๆ:

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

ดังนั้นจึงมีวิธีแก้ปัญหาที่เหมาะสมสำหรับพื้นหลังเว็บไซต์แบบเต็มหน้าจอหลายประการ

โซลูชันที่ยอดเยี่ยม เรียบง่าย และก้าวหน้าโดยใช้ CSS3

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

html ( พื้นหลัง : url (images/bg.jpg ) ไม่ทำซ้ำจุดกึ่งกลาง ศูนย์กลางคงที่ ; -webkit-พื้นหลังขนาด: cover; -moz-พื้นหลังขนาด: cover; -o-พื้นหลังขนาด: ฝาครอบ; ขนาดพื้นหลัง: ปิดบัง)

html ( พื้นหลัง: url (รูปภาพ/bg.jpg) ไม่ทำซ้ำจุดกึ่งกลางตรงกลาง -webkit-พื้นหลังขนาด: ปก; -moz-พื้นหลังขนาด: ปก; -o-พื้นหลังขนาด: ปก; ขนาดพื้นหลัง: ปิดบัง)

โซลูชันนี้รองรับโดยโซลูชันยอดนิยมเกือบทั้งหมดบนเครือข่าย:

Firefox 3.6+ (Firefox 4 รองรับเวอร์ชันนำหน้าที่ไม่ใช่ผู้ขาย)
Opera 10+ (Opera 9.5 รองรับขนาดพื้นหลัง แต่ไม่มีค่าปก)
Chrome อะไรก็ได้+
ไออี 9+
ซาฟารี 3+

Goltzman คนหนึ่งพบวิธีแก้ปัญหาที่ช่วยให้แฮ็กทำงานใน IE ได้

ตัวกรอง : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-ตัวกรอง:;

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"

ตัวกรอง: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); แต่ใส่ใจ!!! นี่อาจทำให้เกิดปัญหากับลิงก์บนเพจได้ อย่างไรก็ตาม หลังจากนั้นไม่นาน Matt Litherland ก็เสริมว่า โดยหลักการแล้วโค้ดสามารถใช้ได้แต่ไม่สามารถใช้กับสิ่งนี้ได้องค์ประกอบ HTML

หรือเนื้อหา แต่คุณต้องใช้งานทุกอย่างผ่าน div ที่มีความสูงและความกว้าง 100%ซีเอสเอส

- แฮ็คหมายเลข 1 เวอร์ชันทางเลือกนำเสนอโดย Doug Neiner ในกรณีนี้ จะใช้องค์ประกอบที่ฝังอยู่ในเพจ

ซึ่งสามารถปรับขนาดได้ในเบราว์เซอร์ใดก็ได้ เราตั้งค่าความสูงขั้นต่ำซึ่งเติมเต็มหน้าต่างเบราว์เซอร์ในแนวตั้ง และตั้งค่าความกว้างเป็น 100% ซึ่งเติมเต็มหน้าในแนวนอน นอกจากนี้เรายังตั้งค่าความกว้างขั้นต่ำเพื่อให้รูปภาพไม่เล็กไปกว่าความเป็นจริง img.bg (/* ตั้งกฎให้เติมพื้นหลัง */ ความสูงขั้นต่ำ: 100%;ความกว้างขั้นต่ำ: 1024px; /* ตั้งค่าสัดส่วนตามสัดส่วน */ความกว้าง: 100%;

img.bg ( /* ตั้งกฎให้เติมพื้นหลัง */ min-height: 100%; min-width: 1024px; /* ตั้งค่าสัดส่วนสัดส่วน */ ความกว้าง: 100%; ความสูง: auto; /* ตั้งค่าตำแหน่ง */ ตำแหน่ง: คงที่ด้านบน: 0; ซ้าย: 0; ) @media หน้าจอและ (ความกว้างสูงสุด: 1024px) ( /* เฉพาะภาพนี้ */ img.bg ( ซ้าย: 50%; ขอบซ้าย: -512px; / * 50% */ ) )

ใช้งานได้กับเบราว์เซอร์คุณภาพสูงทุกเวอร์ชัน - Safari / Opera / Firefox และ Chrome เช่นเคย IE มีความแตกต่างของตัวเอง:

IE 9 - ใช้งานได้;
IE 7/8 - ส่วนใหญ่มักจะทำงานได้อย่างถูกต้อง แต่ไม่จัดรูปภาพให้เล็กกว่าหน้าต่างเบราว์เซอร์
IE 6 - สามารถปรับแต่งได้ แต่ใครจะต้องการเบราว์เซอร์นี้ล่ะ

หรือเนื้อหา แต่คุณต้องใช้งานทุกอย่างผ่าน div ที่มีความสูงและความกว้าง 100%- แฮ็คตัวเลือกที่ 2

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

#bg ( ตำแหน่ง : คงที่ ; บน : -50% ; ซ้าย : -50% ; ความกว้าง : 200% ; ความสูง : 200% ; ) #bg img ( ตำแหน่ง : สัมบูรณ์ ; บน : 0 ; ซ้าย : 0 ; ขวา : 0 ; ด้านล่าง : 0 ; ระยะขอบ : อัตโนมัติ ;

#bg ( ตำแหน่ง:คงที่; บน:-50%; ซ้าย:-50%; ความกว้าง:200%; ความสูง:200%; ) #bg img ( ตำแหน่ง:สัมบูรณ์; บน:0; ซ้าย:0; ขวา:0; ด้านล่าง:0; ระยะขอบ:อัตโนมัติ; ความกว้างขั้นต่ำ:50%;

แฮ็คใช้งานได้ใน:

Safari / Chrome / Firefox (ด้วย รุ่นแรกๆไม่ได้ทดสอบ แต่ทำงานได้ดีในอันล่าสุด)
ไออี 8+
Opera (เวอร์ชันใดก็ได้) และเมื่อใช้ร่วมกับ IE ทั้งคู่จะมีปัญหาในลักษณะเดียวกันโดยมีข้อผิดพลาดในการกำหนดตำแหน่ง

วิธีการด้วย jQuery

ตัวเลือกนี้จะง่ายกว่ามาก (จากมุมมอง CSS) หากเรารู้ว่าอัตราส่วนภาพของรูปภาพ (img ที่ใช้เป็นพื้นหลัง) มีขนาดใหญ่กว่าหรือเล็กกว่าอัตราส่วนปัจจุบันของหน้าต่างเบราว์เซอร์ หากน้อยกว่านั้นเราก็สามารถใช้ได้เพียง width = 100% เท่านั้น และหน้าต่างก็จะมีความกว้างและความสูงเท่ากัน หากมากกว่านั้น คุณสามารถระบุได้เฉพาะความสูง = 100% ให้เต็มหน้าต่างทั้งหมด

ข้อมูลทั้งหมดเข้าถึงได้ผ่าน JavaScript รหัสที่ใช้มีดังนี้:

#bg ( ตำแหน่ง : แก้ไข ; บน : 0 ; ซ้าย : 0 ; ) .bgwidth ( กว้าง : 100% ; ) .bgheight ( สูง : 100% ; )

#bg ( ตำแหน่ง: คงที่; บน: 0; ซ้าย: 0; ) .bgwidth ( กว้าง: 100%; ) .bgheight ( สูง: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"),spectRatio = $bg.width() / $bg.height(); function resizeBg() ( ถ้า ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

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

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

การแปล: วลาด เมอร์เซวิช

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

มีหลายวิธีในการกำหนดขนาด - ดูที่หน้าสาธิตขนาดพื้นหลัง

การปรับขนาดแบบสัมบูรณ์

อาจใช้หน่วยวัด

ขนาดพื้นหลัง: กว้าง-สูง;

ตามค่าเริ่มต้น ความกว้างและความสูงจะถูกตั้งค่าเป็น auto ซึ่งจะออกไป ขนาดดั้งเดิมภาพ

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

ขนาดพื้นหลัง: 100px 200px;

หากระบุเพียงค่าเดียวจะถือเป็นความกว้าง ความสูงถูกตั้งค่าเป็นอัตโนมัติและสัดส่วนจะยังคงอยู่:

ขนาดพื้นหลัง: 100px;

/* คล้ายกัน */ ขนาดพื้นหลัง: อัตโนมัติ 100px;

รหัสนี้ปรับขนาดภาพจาก 200x200 ถึง 100x100 พิกเซล

การเปลี่ยนแปลงขนาดสัมพัทธ์เป็นเปอร์เซ็นต์

หากใช้เปอร์เซ็นต์ ขนาดจะขึ้นอยู่กับองค์ประกอบ ไม่ใช่รูปภาพ:

ขนาดพื้นหลัง: อัตโนมัติ 50%;

ความกว้างของภาพพื้นหลังจึงขึ้นอยู่กับขนาดของคอนเทนเนอร์ หากคอนเทนเนอร์มีความกว้าง 500px ขนาดรูปภาพของเราจะลดลงเหลือ 250x250 การใช้เปอร์เซ็นต์จะมีประโยชน์สำหรับการออกแบบที่ปรับเปลี่ยนได้

- เปลี่ยนความกว้างของหน้าสาธิตเพื่อดูว่าขนาดเปลี่ยนแปลงไปอย่างไร

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

ขนาดพื้นหลัง: ประกอบด้วย;