قدمنا في المقالات السابقة طريقة دمج صور الخلفية. ولكن لا يمكن دمج صور الخلفية فقط، بل يمكن أيضًا دمج الصور الأمامية.
في صفحة نتائج بحث 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{border:none;position:absolute;left:-0px;top:-26px}
يوضح تحليل الكود أعلاه أن العنصر الأصلي للنمط الذي يحمل id=logo في CSS يعتمد الموضع النسبي، ويحدد العرض والارتفاع، ويستخدم الفائض: مخفي لإخفاء جزء التجاوز، بينما يعتمد عنصر img الموضع المطلق، باستخدام اليسار والأعلى لتحديد موضع الصورة، وهو ما يتوافق مع موضع صورة الخلفية.
