วิธีเพิ่มภาพพื้นหลังที่ตอบสนองต่อเว็บไซต์

ต่อไปนี้คือวิธีเพิ่มภาพการออกแบบที่ตอบสนองโดยใช้ CSS

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

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

ในความเป็นจริง "ภาพที่มีลักษณะเป็นของเหลว" เหล่านี้เป็นส่วนสำคัญของเว็บไซต์ที่ตอบสนองต่อความต้องการ (พร้อมด้วยตารางของเหลวและข้อความค้นหาสื่อ) ทั้งสามชิ้นนี้เป็นส่วนสำคัญของการออกแบบเว็บที่ตอบสนองต่อการใช้งานตั้งแต่เริ่มต้น แต่ในขณะที่การเพิ่มภาพอินไลน์แบบตอบสนองในไซต์ได้ค่อนข้างง่าย (ภาพแบบอินไลน์คือกราฟิกที่เข้ารหัสเป็นส่วนหนึ่งของมาร์กอัป HTML) เหมือนกับภาพพื้นหลัง (ซึ่งถูกจัดรูปแบบไว้ในหน้าเว็บโดยใช้คุณสมบัติพื้นหลังของ CSS) ได้ให้ความสำคัญกับนักออกแบบเว็บและนักพัฒนาเว็บแบบเบ็ดเตล็ดเป็นจำนวนมาก Thankfully, การเพิ่มคุณสมบัติ "background-size" ใน CSS ได้ทำให้เป็นไปได้

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

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

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

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

วิธีการใช้พื้นหลังขนาด: ปก;

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

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

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

อัปโหลดภาพของคุณไปยังโฮสต์เว็บของคุณและเพิ่มลงใน CSS เป็นภาพพื้นหลัง:

ภาพพื้นหลัง: url (fireworks-over-wdw.jpg);
background-repeat: ไม่ซ้ำ;
background-position: ศูนย์กลางกลาง;
พื้นหลังแนบ: ถาวร;

เพิ่มเบราเซอร์ก่อนหน้า CSS:

- เว็บเบราว์เซอร์ - พื้นหลังขนาด: ปก;
-moz- พื้นหลังขนาด: ปก;
-o พื้นหลังขนาด: ปก;

จากนั้นเพิ่มคุณสมบัติ CSS:

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

การใช้ภาพที่แตกต่างกันซึ่งเหมาะสมกับอุปกรณ์ต่างๆ

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

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

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

บทความต้นฉบับโดย Jennfier Krynin แก้ไขโดย Jeremy Girard 9/12/17