Bagaimanakah Saya Boleh Mencipta Imej Bertindih dalam HTML?

Imej Bertindih dalam HTML: Panduan Pemula

Ramai pengaturcara web menghadapi keperluan untuk memaparkan imej pada halaman mereka yang bertindih antara satu sama lain. Teknik ini boleh berguna untuk pelbagai tujuan reka bentuk, seperti mencipta reka letak unik atau memaparkan imej dalam fesyen berlapis.

Untuk meletakkan satu imej di atas imej lain dalam HTML, anda boleh menggunakan pendekatan berikut:

1. Gunakan Kedudukan Relatif: Balut imej anda dalam bekas induk dan tetapkan sifat kedudukannya kepada relatif. Ini akan bertindak sebagai titik rujukan untuk meletakkan imej kanak-kanak.
2. Letakkan Imej Kanak-kanak: Tetapkan sifat kedudukan setiap imej kanak-kanak kepada mutlak. Ini membolehkan anda menentukan kedudukan imej anak berbanding bekas induk.
3. Tentukan Offset: Gunakan sifat atas dan kiri untuk menentukan offset dari kiri atas bekas induk sudut. Ini akan menentukan di mana imej kanak-kanak itu diletakkan.

Sebagai contoh, kod HTML berikut menunjukkan segi empat sama biru dengan segi empat sama merah diletakkan di penjuru kanan sebelah atas:

<div class="parent">
  <img class="image1" src="blue-square.jpg" />
  <img class="image2" src="red-square.jpg" />
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

Pendekatan ini membolehkan kawalan tepat ke atas kedudukan imej bertindih tanpa memerlukan penggubahan. Ia amat berguna untuk mencipta reka letak yang kompleks dan paparan imej dinamik di mana imej perlu diletakkan secara relatif antara satu sama lain.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Imej Bertindih dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!