วิธีซ้อนภาพหลายภาพโดยใช้ CSS

เผยแพร่แล้ว: 2020-07-15

CSS ย่อมาจาก Cascaded Style Sheet เป็นภาษาสไตล์ชีตที่กำหนดการนำเสนอของเอกสารในภาษามาร์กอัป เช่น HTML สไตล์ชีตแบบเรียงต่อกันจะแยกความแตกต่างของเนื้อหาและการนำเสนอด้วยภาพอื่นๆ เช่น สี เลย์เอาต์ ฟอนต์ และธีม ความแตกต่างนี้ช่วยปรับปรุงการเข้าถึงเนื้อหาและควบคุมข้อกำหนดของการนำเสนอ CSS กำหนดธีมทั่วไปให้กับหน้าเว็บที่เลือกและมองเห็นได้ทั่วทั้งเว็บไซต์ รายละเอียดของไฟล์ CSS จะถูกเก็บไว้แยกกันเพื่อลดปัญหาที่ซับซ้อนและโครงสร้างเนื้อหาที่ซ้ำซ้อน

สารบัญ ซ่อน

1. การใช้ CSS Grid:

2. ลอยตัวด้วยระยะขอบติดลบ:

3. เมธอด CSS grid และ float รวม:

ข้อดีของการใช้กริด:

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

1. การใช้ CSS Grid:

เข็มหมุด

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

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

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

รหัส HTML สำหรับมัน:

</div>

</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”>

</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 เป็นอย่างดี ในฐานะนักพัฒนา คุณจะรู้ว่ามันเป็นไปได้จริงที่จะทำสิ่งที่คุณเลือกให้สำเร็จ แต่ผู้เริ่มต้นสามารถดูบทช่วยสอนนี้และทำให้ภาพซ้อนทับเกิดขึ้นได้ภายในเวลาอันสั้น เขาควรรู้ว่ารหัสใดอยู่ในไฟล์ใด