Pada artikel sebelumnya, kami memperkenalkan metode menggabungkan gambar latar belakang. Namun tidak hanya gambar background saja yang bisa digabungkan, gambar latar depan juga bisa digabungkan.
Di halaman hasil pencarian Google, klik kanan ikon logo dan simpan sebagai, Anda dapat menemukan bahwa itu bukan Logo Google sederhana, tetapi gambar tambal sulam yang rumit:
Lihat kode sumber halaman pencarian. Bagian Logo kodenya adalah sebagai berikut:
Contoh Kode Sumber
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
Bagian CSS dari kodenya adalah sebagai berikut:
Contoh Kode Sumber
[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}
Analisis kode di atas menunjukkan bahwa elemen induk gaya dengan id=logo di CSS mengadopsi pemosisian relatif, menentukan lebar dan tinggi, dan menggunakan overflow:hidden untuk menyembunyikan bagian overflow; sedangkan elemen img mengadopsi pemosisian absolut, menggunakan kiri dan atas untuk pemosisian gambar. , yang konsisten dengan pemosisian gambar latar belakang.
