Kemampuan bahasa markup - HTML - dan lembar gaya berjenjang - CSS - memungkinkan Anda menempatkan satu gambar di dalam gambar lain dalam banyak cara. Tentu saja, ini memerlukan beberapa keterampilan dalam tata letak halaman web, dan Anda harus memilih metode tertentu berdasarkan kode yang ada. Namun, dalam beberapa kasus, Anda dapat melakukannya tanpa mengedit kode sumber.
instruksi
Langkah 1
Ada cara untuk menempatkan satu gambar di gambar lain tanpa perubahan apa pun di halaman situs. Untuk melakukan ini, cukup mengedit gambar latar belakang yang disimpan di server - gunakan editor grafis apa pun untuk menempatkan gambar latar depan di atasnya. Jika metode ini berhasil untuk Anda, mulailah dengan menentukan lokasi penyimpanan dan nama file gambar latar belakang. Ini dapat dilakukan dengan menemukannya di kode sumber halaman atau dengan membukanya di tab terpisah dan melihat jalur lengkapnya di bilah alamat browser.
Langkah 2
Menggunakan pengelola file sistem manajemen konten atau klien FTP, unduh file yang diperlukan ke komputer Anda dan buka di editor grafis apa pun - misalnya, di aplikasi Paint yang diinstal dengan Windows.
Langkah 3
Tempatkan gambar latar depan di atas latar belakang - di Paint untuk ini Anda harus memilih item "Sisipkan dari" dari daftar tarik-turun "Sisipkan" pada tab "Beranda" dan temukan file yang diperlukan dalam dialog yang terbuka. Kemudian sesuaikan posisi gambar yang disisipkan pada background yang ada (tarik dengan mouse) dan simpan hasilnya (Ctrl+S).
Langkah 4
Muat kembali gambar yang diedit, timpa yang lama. Ini menyelesaikan prosedur.
Langkah 5
Metode yang dijelaskan tidak nyaman jika gambar yang disisipkan perlu diubah dari waktu ke waktu. Kemudian gunakan kemampuan bahasa HTML - misalnya, buat gambar latar belakang sebagai latar belakang elemen halaman tempat gambar latar depan akan ditempatkan. Elemen wadah seperti itu dapat berupa, katakanlah, sebuah lapisan (div). Untuk membuat sebagian besar gambar menjadi latar belakangnya, Anda perlu menggunakan deskripsi gaya - atribut gaya dari tag div. Wadah kosong dalam kode HTML mungkin terlihat seperti ini:
Dalam tanda kurung, tunjukkan alamat dan nama file gambar latar di situs Anda.
Langkah 6
Buat tag gambar latar depan (img), menggunakan atribut gaya yang sama untuk mengatur jumlah padding dari tepi wadah latar belakang. Sebagai contoh:
Di sini, atribut width dan height mengatur dimensi gambar, dan empat angka setelah padding menunjukkan padding dalam piksel dari tepi wadah, mulai dari atas (50) dan selanjutnya searah jarum jam (60 - kanan, 70 - bawah, 80 - kiri).
Langkah 7
Tempatkan tag img dalam wadah:
Langkah 8
Tambahkan baris yang dibuat ke kode sumber halaman, lalu, ubah indentasi, sesuaikan posisi gambar yang disisipkan dengan latar belakang gambar latar.
