ในบทความก่อนหน้านี้ เราได้แนะนำวิธีการรวมภาพพื้นหลัง แต่ไม่เพียงแต่สามารถรวมภาพพื้นหลังได้เท่านั้น แต่ยังสามารถรวมภาพเบื้องหน้าได้อีกด้วย
ในหน้าผลการค้นหาของ Google คลิกขวาที่ไอคอนโลโก้แล้วบันทึกเป็น คุณจะพบว่าไม่ใช่โลโก้ Google ธรรมดา แต่เป็นรูปภาพที่มีการเย็บปะติดปะต่อกันที่ซับซ้อน:
ดูซอร์สโค้ดของหน้าการค้นหา ส่วนโลโก้ของโค้ดมีดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
ส่วน CSS ของโค้ดจะเป็นดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{เส้นขอบ:ไม่มี;ตำแหน่ง:สัมบูรณ์;ซ้าย:-0px;ด้านบน:-26px}
การวิเคราะห์โค้ดด้านบนแสดงให้เห็นว่าองค์ประกอบหลักของสไตล์ที่มี id=logo ใน CSS ใช้การวางตำแหน่งแบบสัมพัทธ์ กำหนดความกว้างและความสูง และใช้ overflow:hidden เพื่อซ่อนส่วนที่ล้น ในขณะที่องค์ประกอบ img ใช้การวางตำแหน่งแบบสัมบูรณ์โดยใช้ด้านซ้ายและด้านบน สำหรับการวางตำแหน่งภาพซึ่งสอดคล้องกับการวางตำแหน่งของภาพพื้นหลัง
