วิธีซ้อนภาพหลายภาพโดยใช้ CSS
เผยแพร่แล้ว: 2020-07-15CSS ย่อมาจาก Cascaded Style Sheet เป็นภาษาสไตล์ชีตที่กำหนดการนำเสนอของเอกสารในภาษามาร์กอัป เช่น HTML สไตล์ชีตแบบเรียงต่อกันจะแยกความแตกต่างของเนื้อหาและการนำเสนอด้วยภาพอื่นๆ เช่น สี เลย์เอาต์ ฟอนต์ และธีม ความแตกต่างนี้ช่วยปรับปรุงการเข้าถึงเนื้อหาและควบคุมข้อกำหนดของการนำเสนอ CSS กำหนดธีมทั่วไปให้กับหน้าเว็บที่เลือกและมองเห็นได้ทั่วทั้งเว็บไซต์ รายละเอียดของไฟล์ CSS จะถูกเก็บไว้แยกกันเพื่อลดปัญหาที่ซับซ้อนและโครงสร้างเนื้อหาที่ซ้ำซ้อน
CSS สามารถซ้อนทับหลายภาพได้ กล่าวคือ การวางภาพไว้บนสุดของอีกภาพหนึ่ง มีสามวิธีในการทำเช่นนี้ เรามาดูทีละอย่างกัน
1. การใช้ CSS Grid:
CSS Grid เป็นคุณสมบัติ CSS สองมิติที่ทรงพลังที่สุดที่จัดการแถวและคอลัมน์และเนื้อหาในนั้น คุณจะได้ทำงานกับทั้งองค์ประกอบหลักและองค์ประกอบลูกโดยทำงานกับกฎ CSS ตารางใน CSS ได้เปลี่ยนวิธีการจัดวางหน้าเว็บและเนื้อหาโดยพื้นฐาน ในการทำงานกับกริด คุณควรทราบเกี่ยวกับคอนเทนเนอร์กริด รายการกริด รายการกริด และเซลล์กริด นอกจากนี้ยังรวมถึงข้อกำหนดอื่นๆ เช่น แทร็กกริด และพื้นที่กริด องค์ประกอบย่อยของคอนเทนเนอร์กริดสามารถกำหนดตำแหน่งตัวเองได้ราวกับว่าองค์ประกอบเหล่านั้นซ้อนทับกับองค์ประกอบอื่นๆ
คุณสามารถสร้างขนาดแทร็กคงที่และยืดหยุ่นในกริดโดยใช้พิกเซล การระบุจำนวนพิกเซลที่กำหนดสามารถกำหนดตารางให้พอดีกับเลย์เอาต์ที่ต้องการได้ หากต้องการระบุเส้นกริดแบบยืดหยุ่น คุณสามารถพูดถึงค่าในรูปของเปอร์เซ็นต์ได้
คุณลักษณะที่สำคัญที่สุดของ CSS Grid คือสามารถซ้อนทับรูปภาพโดยการเปลี่ยนดัชนี z โดยไม่ขัดจังหวะการไหลของเอกสารปกติ ด้วยการใช้กริด CSS คุณสามารถทำงานกับความสูงและความกว้างขององค์ประกอบดังกล่าวได้ นอกจากนี้ รูปภาพด้านบนจะวางลงเสมอ ซึ่งจัดตำแหน่งให้ตรงกับมุมล่างซ้าย รูปภาพจะจัดแนวตัวเองกับขอบด้านซ้ายขององค์ประกอบคอนเทนเนอร์
รหัส HTML สำหรับมัน:
<div class="image-stack">
<div class="image-stack__item image-stack__item—top">
<img src=”Https://sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=”รูปภาพแรก”>
</div>
<div class="image-stack__item image-stack__item—bottom">
<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”ภาพที่สอง”>
</div></div>
คุณสามารถเพิ่มแอตทริบิวต์ role=”presentation” ให้กับองค์ประกอบได้หากรูปภาพมีลักษณะการตกแต่ง ด้วยข้อกำหนดนี้ รูปภาพจะไม่แสดงต่อผู้อ่านหน้าจอ
ตอนนี้เราต้องระบุความกว้างของคอลัมน์ในตารางโดยพิจารณา มีหลายวิธีที่จะทำได้ แต่เราจะสร้างตาราง 12 คอลัมน์ เนื่องจากโดยทั่วไปจะใช้ตาราง 12 คอลัมน์
สำหรับสิ่งนี้ เราจะระบุสิ่งต่อไปนี้ในไฟล์ CSS ของเราในองค์ประกอบหลัก ซึ่งประกอบด้วยองค์ประกอบอื่นๆ:
.image-stack
{
จอแสดงผล: กริด;
ตารางเทมเพลตคอลัมน์: ทำซ้ำ (12, 1fr);
ตำแหน่ง: ญาติ;
}
Grid-template-columns เป็นคุณลักษณะในการระบุจำนวนคอลัมน์ที่กริดจะมี ในขณะที่ 1fr ระบุเบราว์เซอร์เพื่อคำนวณจำนวนพื้นที่ว่าง สิ่งเหล่านี้มีประโยชน์เมื่อคุณมีช่องว่างภายในคอลัมน์และแถว
ตำแหน่ง: ญาติมีความสำคัญที่นี่ ช่วยให้ดัชนี z สำหรับรูปภาพทำงานตามความต้องการและข้อกำหนดของเรา เมื่อคุณมีตารางใช้งานแล้ว คุณต้องดูความกว้างของรูปภาพ หากต้องการเพิ่มความกว้างให้กับรูปภาพ ข้อมูลจำเพาะที่เหมาะสมที่สุดคือการระบุความกว้างเป็นเปอร์เซ็นต์ ตอนนี้ คุณควรเริ่มต้นด้วยความกว้างทั้งหมดของส่วนประกอบที่เกี่ยวข้องกับรูปภาพ ความกว้างของรูปภาพคือ 844 พิกเซล ซึ่งหมายความว่าเป็น 100% ความกว้างของรูปภาพด้านบนคือ 521 พิกเซล ที่นี่ เราสามารถหาร 521px ด้วย 844px ตอนนี้ต้องคูณค่าผลลัพธ์ด้วย 100 ซึ่งเท่ากับ 61.7% โดยประมาณ
หากคุณปัดเศษขึ้น 61.7% เป็น 62% คุณจะเห็นว่าคุณได้รับค่าตรงกลาง 58% และ 66% ดังนั้นเราจะรับถึง 66% สำหรับรูปภาพด้านบน เรามีโค้ดต่อไปนี้ใน CSS:
.image-stack__item—บน
{
ตารางคอลัมน์: 1/ช่วง 8;
ตารางแถว: 1; // ต้องอยู่แถวเดียวกับรูปที่สอง
Padding-top: 20% // วางรูปภาพลงและคงสัดส่วนไว้
ดัชนี z: 1; //ทำให้ภาพอยู่ด้านบนสุดของภาพล่าง
}
สำหรับภาพที่สอง เราจะคำนวณ:
645 px/844 px และค่าต้องคูณด้วย 100 ซึ่งได้ผลลัพธ์ 76.4% เราจะปัดเศษขึ้นให้ได้ 75% ซึ่งพอดีกับตาราง 12 คอลัมน์ของเราใน CSS
คุณต้องตรวจสอบให้แน่ใจว่ารูปภาพด้านล่างใช้เก้าคอลัมน์และเริ่มแสดงผลผ่าน เส้น ตารางที่ 4 ด้วยเหตุนี้ รูปภาพควรกินพื้นที่ที่เหลือของตาราง
รหัส CSS สำหรับรูปภาพด้านล่างมีดังนี้:
.image-stack__item—ด้านล่าง
{
ตารางคอลัมน์: 4
ตารางแถว: 1; //ทำให้ภาพปรากฏอยู่ในแถวเดียวกัน
}
ด้วยกริด CSS การทับซ้อนกันทุกประเภทเป็นไปได้ การซ้อนทับกันอาจรวมถึงรูปภาพทับรูปภาพ ข้อความทับรูปภาพ หรือแม้แต่ข้อความที่ทับซ้อนกันบนข้อความ มันมีความเป็นไปได้มากเท่าที่คุณจะจินตนาการได้ รหัสสุดท้ายปรากฏดังนี้:
<div class=”container”> <p>วิธีการกริด CSS</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”>
<Img src=”Https//sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg” alt=รูปภาพแรก”></div>
<div class="image-stack__item image-stack__item–bottom">
<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”ภาพที่สอง”></div>
</div> <p>เนื้อหาข้อความอยู่ที่นี่</p> </div>
2. ลอยตัวด้วยระยะขอบติดลบ:
คุณสมบัติ Float ของ CSS วางองค์ประกอบหน้าเว็บทางด้านซ้ายหรือด้านขวาของคอนเทนเนอร์ อนุญาตให้องค์ประกอบข้อความและอินไลน์ห่อองค์ประกอบ แม้ว่าอิลิเมนต์ float จะเป็นส่วนหนึ่งของเพจ แต่ก็ยังถูกนำออกจากโฟลว์ปกติ ด้วยคุณสมบัติ float องค์ประกอบจะเลื่อนไปทางขวาหรือซ้ายเพื่อสัมผัสขอบขององค์ประกอบคอนเทนเนอร์
คุณสมบัติ float ทำให้องค์ประกอบรอบ ๆ มันลอย คุณสมบัตินี้แสดงองค์ประกอบและเนื้อหาที่คล้ายกับการออกแบบการพิมพ์ แนวคิดดังกล่าวเรียกว่าการตัดข้อความ หมายความว่าข้อความล้อมรอบองค์ประกอบ ในการออกแบบสิ่งพิมพ์ ส่วนประกอบอาจเป็นภาพที่ข้อความลอยอยู่รอบตัว การละเว้นการตัดข้อความจะทำให้ข้อความซ้อนทับรูปภาพราวกับว่าไม่มีรูปภาพอยู่ คุณสามารถใช้โฟลตเพื่อออกแบบเลย์เอาต์ของหน้าเว็บหรือเว็บไซต์ทั้งหมดได้ ไม่ได้จำกัดเพียงแค่การห่อข้อความรอบองค์ประกอบหน้าเว็บเท่านั้น
โค้ดนี้สนับสนุนทุกเบราว์เซอร์ ซึ่งรวมถึง Internet Explorer วิธีนี้เน้นที่การนำองค์ประกอบออกจากเอกสารและแสดงผลโดยใช้ float ส่วนที่ดีที่สุดของไวยากรณ์การเข้ารหัสนี้คือโครงสร้างยังคงคล้ายกับโครงสร้างที่กล่าวถึงก่อนหน้านี้ สำหรับองค์ประกอบหลักใน image-stack เราใช้ "clear" ในขณะที่เราลอยองค์ประกอบลูก ที่นี่เนื้อหาแสดงด้านล่างภาพ ไวยากรณ์เป็นด้านล่าง:
.image-stack::after
{
เนื้อหา: ' ';
จอแสดงผล: ตาราง;
ชัดเจน: ทั้งสอง;
}
โค้ดด้านบนนี้สำหรับรูปภาพที่วางอยู่ด้านล่าง ดังนั้น รูปที่สองจะไปอยู่เหนือภาพนี้
ตอนนี้สำหรับภาพที่วางไว้ด้านบนมีโค้ดดังนี้:
.image-stack__item—บน
{
ลอย: ซ้าย;
ความกว้าง: 66%;
ขอบขวา: -100%;
แผ่นรองด้านบน: 15%;
ตำแหน่ง: ญาติ;
ดัชนี z: 1;
}
เรามีมาร์จิ้นที่ระบุในค่าลบซึ่งมีนัยสำคัญ ระยะขอบติดลบจะทำงานแตกต่างกันในสถานการณ์ที่ต่างกัน หากใช้กับด้านบนหรือด้านล่าง พวกเขาจะกระทำในลักษณะเฉพาะ และพวกมันมีพฤติกรรมแตกต่างออกไปหากระยะขอบติดลบอยู่ทางซ้ายหรือขวาขององค์ประกอบที่ลอยอยู่
ในที่นี้ เราได้นำระยะขอบขวาติดลบมาใช้กับองค์ประกอบด้านซ้ายที่ลอยอยู่ซึ่งช่วยให้ภาพซ้อนทับกันได้ -100% คือความกว้างของที่เก็บรูปภาพ ค่านี้วางไว้ทางด้านซ้ายและให้รูปภาพด้านล่างเรนเดอร์ด้านล่างเหมือนไม่ได้อยู่ในโมเดลวัตถุของเอกสาร ดังนั้นรหัสสุดท้ายจึงปรากฏดังนี้:
{
ขนาดกล่อง: เส้นขอบกล่อง;
}
พี {
ขนาดตัวอักษร: 20px;
ตระกูลแบบอักษร: sans-serif;
สี: #6439a9;
}
.คอนเทนเนอร์ {
ช่องว่างภายใน: 100px 30px;
ความกว้าง: 100%;
ระยะขอบ: 0 อัตโนมัติ;
ความกว้างสูงสุด: 900px;
}
//เคลียร์ฟิกซ์
.image-stack::after {
เนื้อหา: ' ';
แสดง: ตาราง;
ชัดเจน: ทั้งสอง;
}
.image-stack__item–top {
ลอย: ซ้าย;
ความกว้าง: 66%;
ระยะขอบขวา: -100%;
แผ่นรองด้านบน: 15%; //โดยพลการ
ตำแหน่ง: ญาติ;
ดัชนี z: 1;
}
.image-stack__item–bottom
{
ลอย: ขวา;
ความกว้าง: 75%;
}
img
{
ความกว้าง: 100%;
}
3. CSS grid และ float วิธีรวมกัน:
รหัสในวิธีนี้รองรับการทำงานกับเบราว์เซอร์ทั้งหมด นอกจากนี้ยังระบุรหัสที่ทำงานอย่างสมบูรณ์แบบบนเบราว์เซอร์เฉพาะที่เก่าและล้าสมัย ที่นี่ เราใช้คุณลักษณะ “@supports” ซึ่งเป็นส่วนสำคัญของวิธีนี้ เป็นการตรวจสอบว่าเบราว์เซอร์ที่พิจารณารองรับค่า "display: grid" หรือไม่ เราจะใช้รหัสที่รองรับเบราว์เซอร์ Internet Explorer ก่อนที่เราจะใช้สิ่งอำนวยความสะดวก “@supports” ของรหัส
ในฟีเจอร์ “@supports” เราจะรีเซ็ตความกว้างเป็น 100% ตอนนี้ คุณสมบัติ float ไม่มีนัยสำคัญในที่นี้ตั้งค่า dth เป็น 100% การเพิ่มเบราว์เซอร์ IE พิจารณาสนับสนุน anner และพวกมันมีพฤติกรรมต่างออกไป, หากเป็นลบ m จะไม่กระทบต่อองค์ประกอบในการใช้งาน ดังนั้นรหัสสุดท้ายสำหรับมันจึงดูเหมือนด้านล่าง:
<div class=”container”> <p>วิธีข้ามเบราว์เซอร์</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”> <img src=”https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:/ /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>เนื้อหาที่เป็นข้อความอยู่ที่นี่</p> </div>
ข้อดีของการใช้กริด:
การลดการเข้ารหัสเป็นข้อได้เปรียบที่สำคัญของการใช้กริด CSS แทนที่จะสร้างองค์ประกอบ HTML เพิ่มเติมเพื่อใช้เป็นฐานของกริด คุณใช้สไตล์ชีตเพื่อสร้างกริด กรอบงานกริดไม่ได้ใช้ประโยชน์จากชื่อคลาสที่มีความหมายตามความหมายเสมอไป เนื่องจากกริด CSS มีลักษณะเฉพาะ คุณไม่จำเป็นต้องรวมไลบรารีขนาดใหญ่ในโครงการของคุณเพื่อรองรับ การพัฒนาเว็บโดยใช้ CSS นั้นเร็วกว่าเพราะการเรียนรู้ไวยากรณ์นั้นง่าย นอกจากนี้ การสร้างต้นแบบด้วย CSS นั้นรวดเร็วและมีประสิทธิภาพ
ด้วยการสนับสนุนเบราว์เซอร์ที่เพิ่มขึ้น คุณสามารถใช้กริดได้ทุกที่ บทแนะนำสำหรับตารางมีอยู่ทุกที่ ทุกคนตั้งแต่เริ่มต้นจนถึงนักพัฒนาขั้นสูงสามารถใช้งานได้ กริดช่วยให้ใช้งานอินเทอร์เฟซผู้ใช้ของหน้าเว็บได้ง่ายในบริบทต่างๆ คุณสามารถสร้างเค้าโครงที่ตอบสนองและมีโครงสร้างโดยไม่ต้องตัดข้อความที่ไม่มีที่สิ้นสุดและมีเค้าโครงสามคอลัมน์ ตารางนำเสนอการบำรุงรักษาที่ง่ายและความยืดหยุ่นสำหรับการออกแบบหน้าเว็บ นอกจากนี้ คุณสามารถทำงานกับแถวและคอลัมน์พร้อมกันเพื่อสร้างแผนที่ซับซ้อนและยืดหยุ่นได้ เนื่องจากเบราว์เซอร์ส่วนใหญ่รองรับระบบกริด คุณไม่จำเป็นต้องมีโค้ดสำรองจึงจะใช้งานได้
ตารางช่วยให้นักออกแบบสามารถสร้างเค้าโครงเว็บไซต์ที่สร้างสรรค์และน่าทึ่งได้ นอกจากนี้ นักออกแบบยังมีทางเลือกที่จะเปลี่ยนเป็นการออกแบบที่ตอบสนองได้โดยไม่กระทบต่อรูปลักษณ์โดยรวมและความสวยงามของการออกแบบ CSS รวมแนวคิดการออกแบบทั้งกริดและนักออกแบบเพื่อสร้างการออกแบบที่พร้อมใช้งานทันที การออกแบบนี้มีทั้งรูปลักษณ์ที่สวยงามและตอบสนองต่อผู้ใช้ที่เชี่ยวชาญด้านเทคโนโลยีในปัจจุบัน
บทสรุป:
การซ้อนภาพเป็นแนวคิดที่น่าตื่นเต้นในโลกแห่งการออกแบบ เมื่อนักพัฒนาต้องจัดการกับการทับซ้อนของรูปภาพ คุณสามารถดำเนินการตามวิธีที่กล่าวถึงได้ หากคุณคุ้นเคยกับ CSS เป็นอย่างดี ในฐานะนักพัฒนา คุณจะรู้ว่ามันเป็นไปได้จริงที่จะทำสิ่งที่คุณเลือกให้สำเร็จ แต่ผู้เริ่มต้นสามารถดูบทช่วยสอนนี้และทำให้ภาพซ้อนทับเกิดขึ้นได้ภายในเวลาอันสั้น เขาควรรู้ว่ารหัสใดอยู่ในไฟล์ใด