Bagaimanakah Saya Boleh Bertindih Imej dalam HTML tanpa Menggunakan Penggabungan?

Menempatkan Imej Bertindih dalam HTML tanpa Menggubah

Anda ingin memaparkan berbilang imej pada halaman web, dengan beberapa diletakkan di atas yang lain, tanpa menggunakan penggubahan atas sebab prestasi. Mari kita selami penyelesaiannya:

Untuk mencapai pertindihan imej, anda boleh menggunakan teknik penentududukan HTML dan CSS. Balut imej dalam bekas induk dan gunakan kedudukan relatif padanya. Imej individu harus mempunyai kedudukan mutlak.

Berikut ialah contoh coretan kod:

<div class="parent">
  <img class="image1" src="blue-square.png" />
  <img class="image2" src="red-square.png" />
</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;
}

Dalam contoh ini, bekas induk mempunyai kedudukan relatif, membenarkan imej anak diposisikan secara relatif kepadanya. Imej1 mempunyai kedudukan relatif dan kekal dalam kedudukan asalnya. Imej2 mempunyai kedudukan mutlak dan diimbangi sebanyak 30px dari bahagian atas dan tepi kiri bekas induk.

Dengan menggunakan pendekatan ini, anda boleh meletakkan imej dengan tepat tanpa overhed penggubahan. Ini amat berfaedah untuk senario di mana anda perlu memaparkan berbilang imej secara dinamik atau mempunyai keperluan kedudukan yang kompleks.

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