Cara Memasukkan Gambar Ke Dalam Gambar Di Laman Web

Isi kandungan:

Cara Memasukkan Gambar Ke Dalam Gambar Di Laman Web
Cara Memasukkan Gambar Ke Dalam Gambar Di Laman Web

Video: Cara Memasukkan Gambar Ke Dalam Gambar Di Laman Web

Video: Cara Memasukkan Gambar Ke Dalam Gambar Di Laman Web
Video: Tutorial Dasar Html #6 - Cara Memasukkan Gambar Pada HTML 2024, April
Anonim

Keupayaan bahasa markup - HTML - dan helaian gaya lata - CSS - membolehkan anda meletakkan satu gambar dalam gambar yang lain dengan pelbagai cara. Sudah tentu, ini memerlukan beberapa kemahiran dalam susun atur halaman web, dan anda perlu memilih kaedah tertentu berdasarkan kod yang ada. Namun, dalam beberapa kes, anda boleh melakukannya tanpa mengedit kod sumber.

Cara memasukkan gambar ke dalam gambar di laman web
Cara memasukkan gambar ke dalam gambar di laman web

Arahan

Langkah 1

Ada cara untuk meletakkan satu gambar di gambar yang lain tanpa perubahan pada halaman laman web ini. Untuk melakukan ini, cukup untuk mengedit gambar latar yang disimpan di pelayan - gunakan penyunting grafik apa pun untuk meletakkan gambar latar depan di atasnya. Sekiranya kaedah ini sesuai untuk anda, mulakan dengan menentukan lokasi penyimpanan dan nama fail gambar latar. Ini dapat dilakukan dengan mencarinya di kod sumber halaman atau dengan membukanya di tab berasingan dan melihat jalan penuh di bar alamat penyemak imbas.

Langkah 2

Dengan menggunakan pengurus fail sistem pengurusan kandungan atau klien FTP, muat turun fail yang diperlukan ke komputer anda dan buka di mana-mana penyunting grafik - misalnya, dalam aplikasi Cat yang dipasang dengan Windows.

Langkah 3

Letakkan gambar latar depan di latar belakang - di Cat untuk ini anda perlu memilih item "Sisipkan dari" dari senarai juntai bawah "Sisipkan" pada tab "Laman Utama" dan cari fail yang diperlukan dalam dialog yang terbuka. Kemudian sesuaikan kedudukan gambar yang disisipkan pada latar belakang yang ada (seret dengan tetikus) dan simpan hasilnya (Ctrl + S).

Langkah 4

Muat semula gambar yang diedit, ganti gambar lama. Ini melengkapkan prosedur.

Langkah 5

Kaedah yang dijelaskan tidak selesa apabila gambar yang dimasukkan perlu diubah dari semasa ke semasa. Kemudian gunakan kemampuan bahasa HTML - sebagai contoh, jadikan gambar latar sebagai latar elemen halaman di mana gambar latar depan akan diletakkan. Elemen kontena seperti itu boleh menjadi lapisan (div). Untuk menjadikan sebahagian besar gambar menjadi latar belakangnya, anda perlu menggunakan keterangan gaya - atribut gaya pada tag div. Bekas kosong dalam kod HTML mungkin kelihatan seperti ini:

Dalam kurungan, nyatakan alamat dan nama fail gambar latar di laman web anda.

Langkah 6

Buat tag gambar latar depan (img), menggunakan atribut gaya yang sama untuk menetapkan jumlah padding dari tepi bekas latar belakang. Sebagai contoh:

Di sini, atribut lebar dan tinggi menetapkan dimensi gambar, dan empat nombor setelah pelapik menunjukkan padding dalam piksel dari tepi bekas, bermula di bahagian atas (50) dan seterusnya mengikut arah jam (60 - kanan, 70 - bawah, 80 - kiri).

Langkah 7

Letakkan tag img di dalam bekas:

Langkah 8

Tambahkan garis yang dibuat ke kod sumber halaman, dan kemudian, mengubah lekukan, menyesuaikan kedudukan gambar yang disisipkan terhadap latar belakang gambar latar.

Disyorkan: